The AEM Dialog Dark Mode Switcher You Never Knew You Needed

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

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

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.