Dark Mode
- Add the
rte-darkclass to the editor's element for a dark toolbar, menus and dialogs. - Use
rte-auto-darkinstead to follow the visitor's system setting. - The writing area stays white on purpose, so the colours an author picks look the same once published. To theme it too, point
config.contentCssUrlat your own stylesheet.
<!-- Always dark -->
<div id="div_editor1" class="rte-dark"></div>
<!-- Follow the visitor's system setting -->
<div id="div_editor2" class="rte-auto-dark"></div>
<script>
var editor1 = new RichTextEditor("#div_editor1");
var editor2 = new RichTextEditor("#div_editor2");
// Switch at runtime, for example from your site's theme toggle:
document.querySelector("#div_editor1").classList.toggle("rte-dark", isDark);
</script>Related: skins, custom toolbar.