It seems like dark mode is taking over everything from IDE’s, to various apps and services (including the new MacOs Mojave).

Use Case

The use case is pretty simple. In some dialogs, you have RTE’s and want to author text in white color. But that text becomes invisible against the default, white background of dialog boxes in AEM (I believe 6.3+). See for your self:





So I wondered “Why not have a button that toggles between the light and dark mode?” It’s possible because Coral already supports that!

The Dark Mode Switcher

Content for Everyone Companies that can quickly and consistently meet the demands of consumers are thriving in an era of infinite content. Learn about how to build fluid experiences for your omnichannel customers. Get the Guide

Here is an example:



How I built it:

First, add this code into a clientlib with categories="[cq.authoring.editor.hook]"

(function(){ function getButton (clickHandler) { var btn = new Coral.Button() btn.set({ variant: Coral.Button.variant.MINIMAL, size: Coral.Button.size.MEDIUM, icon: "wand" }); btn.classList.add("cq-dialog-header-action"); btn.on("click", function(e){ e.preventDefault(); clickHandler(e); }); return btn; } $(document).on("dialog-loaded", function(event) { var $dialog = event.dialog; if (!$dialog || !$dialog.length) return; var $dialogWrapper = $dialog.closest('coral-dialog'); var $dialogActions = $dialogWrapper.find(".cq-dialog-actions"); // add switch button and handler var switchButton = getButton(function(){ $dialogWrapper.toggleClass('coral--dark') }); // add button to dialog actions $dialogActions.prepend(switchButton) }); })();

Please note that this was tested on AEM 6.4. I’m pretty sure it would also wok on AEM 6.3 but have not tested. Please let me know if you did!

There you have it! Dark Mode all the things! The code should be extremely simple and easy to follow. But comment if you have questions or want further assistance.