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


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

Demo | Package Install | Github


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


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);{

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

No comments:

Post a Comment