Skip to main content


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

Here is an example:

How I built it:

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

  function getButton (clickHandler) {
    var btn = new Coral.Button()
      variant: Coral.Button.variant.MINIMAL,
      size: Coral.Button.size.MEDIUM,
      icon: "wand"
    btn.on("click", function(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(){
    // add button to dialog actions


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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Ahmed Musallam, Adobe Technical Lead

Ahmed is an Adobe Technical Lead and expert in the Adobe Experience Cloud.

More from this Author

Follow Us