AEM 63 - Clientlib to change the dialog background to Dark / Light

Goal

Add a toggle icon in dialog header to change the dialog background to dark or light

Demo | Package Install | Github

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/eaem-dialog-dark-light-view

2) Create node /apps/eaem-dialog-dark-light-view/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.authoring.dialog.all

3) Create file (nt:file) /apps/eaem-dialog-dark-light-view/clientlib/js.txt and add

                       dark-light.js

4) Create file (nt:file) /apps/eaem-dialog-dark-light-view/clientlib/dark-light.js and add the following code

(function ($, $document) {
    $document.on("dialog-ready", handler);

    function handler(){
        var dialog = $("coral-dialog"),
            actions = dialog.find(".cq-dialog-actions");

        var bg = $(getButtonHtml()).prependTo(actions);

        bg.click(function(event){
            event.preventDefault();
            dialog.toggleClass("coral--dark");
        });
    }

    function getButtonHtml(){
        return '<button class="cq-dialog-header-action coral-Button coral-Button--minimal" title="Background Dark/Light">' +
                    '<coral-icon icon="lightbulb" size="S"/>' +
                '</button>';
    }
})(jQuery, jQuery(document));