django-cms · fsbraun · Jun 6, 2022 · Feb 9, 2022 · Feb 11, 2022 · Feb 18, 2022
diff --git a/CHANGELOG.rst b/CHANGELOG.rst
@@ -5,7 +5,7 @@ Changelog
 unreleased
 ==========
 
-* Added dark mode support to css
+* Added dark mode support to css, dark mode settings and toggle button
 * Fix publishing of static placeholders outside of CMS pages
 * Allow to override the template rendered after a plugin has been saved.
 * Revert change to the toolbar sites menu to use ``http`` protocol.

diff --git a/cms/admin/settingsadmin.py b/cms/admin/settingsadmin.py
@@ -11,7 +11,7 @@
     HttpResponse, HttpResponseBadRequest, HttpResponseRedirect,
 )
 from django.http.request import QueryDict
-from django.urls import re_path
+from django.urls import Resolver404, re_path, resolve
 from django.utils.translation import override
 
 from cms.admin.forms import RequestToolbarForm
@@ -97,6 +97,10 @@ def get_toolbar(self, request):
         request = copy.copy(request)
         request.GET = data
         request.current_page = current_page
+        try:
+            request.resolver_match = resolve(origin_url.path)
+        except Resolver404:
+            pass
         request.toolbar = CMSToolbar(request, request_path=origin_url.path, _async=True)
         request.toolbar.set_object(attached_obj or current_page)
         return HttpResponse(request.toolbar.render())

diff --git a/cms/cms_toolbars.py b/cms/cms_toolbars.py
@@ -94,6 +94,22 @@ def add_wizard_button(self):
                                       disabled=disabled,
                                       on_close=REFRESH_PAGE)
 
+@toolbar_pool.register
+class AppearanceToolbar(CMSToolbar):
+    """
+    Adds appearance switches, esp. for dark and light mode
+    """
+    color_scheme_toggle = get_cms_setting('COLOR_SCHEME_TOGGLE')
+
+    def populate(self):
+        if self.color_scheme_toggle:
+            dark_mode_toggle = TemplateItem(
+                template="cms/toolbar/items/dark_mode_toggle.html",
+                side=self.toolbar.RIGHT,
+            )
+            self.toolbar.add_item(dark_mode_toggle)
+
+
 
 @toolbar_pool.register
 class BasicToolbar(CMSToolbar):

diff --git a/cms/static/cms/fonts/src/moon.svg b/cms/static/cms/fonts/src/moon.svg
diff --git a/cms/static/cms/fonts/src/sun.svg b/cms/static/cms/fonts/src/sun.svg
diff --git a/cms/static/cms/js/modules/cms.structureboard.js b/cms/static/cms/js/modules/cms.structureboard.js
@@ -1022,26 +1022,24 @@ class StructureBoard {
         // refresh toolbar
         var currentMode = CMS.settings.mode;
 
-        this._loadToolbar()
-            .done(newToolbar => {
-                CMS.API.Toolbar._refreshMarkup($(newToolbar).find('.cms-toolbar'));
-            })
-            .fail(() => Helpers.reloadBrowser());
-
         if (currentMode === 'structure') {
             this._requestcontent = null;
 
             if (this._loadedContent && action !== 'COPY') {
                 this.updateContent();
+                return;  // Toolbar loaded
             }
-            return;
-        }
-
-        // invalidate the content mode
-        if (action !== 'COPY') {
+        } else if (action !== 'COPY') {
             this._requestcontent = null;
             this.updateContent();
+            return;  // Toolbar loaded
+
         }
+        this._loadToolbar()
+            .done(newToolbar => {
+                CMS.API.Toolbar._refreshMarkup($(newToolbar).find('.cms-toolbar'));
+            })
+            .fail(() => Helpers.reloadBrowser());
     }
 
     _propagateInvalidatedState(action, data) {

diff --git a/cms/static/cms/js/modules/cms.toolbar.js b/cms/static/cms/js/modules/cms.toolbar.js
@@ -421,6 +421,12 @@ var Toolbar = new Class({
             this._debug();
         }
 
+        if (CMS.settings.color_scheme) {
+            this.set_color_scheme (CMS.settings.color_scheme);
+        } else if (CMS.config.color_scheme) {
+            this.set_color_scheme (CMS.config.color_scheme);
+        }
+
         // check if there are messages and display them
         if (CMS.config.messages) {
             CMS.API.Messages.open({
@@ -616,6 +622,18 @@ var Toolbar = new Class({
                     onSuccess: el.data('on-success')
                 });
                 break;
+            case 'color-toggle':
+                switch (this.get_color_scheme()) {
+                    case 'light':
+                        this.set_color_scheme('dark');
+                        break;
+                    case 'dark':
+                        this.set_color_scheme('light');
+                        break;
+                    default:
+                        break;
+                }
+                break;
             default:
                 Helpers._getWindow().location.href = el.attr('href');
         }
@@ -756,6 +774,55 @@ var Toolbar = new Class({
         CMS.API.Clipboard.ui.triggers = $('.cms-clipboard-trigger a');
         CMS.API.Clipboard.ui.triggerRemove = $('.cms-clipboard-empty a');
         CMS.API.Clipboard._toolbarEvents();
+    },
+
+    /**
+     * Get color scheme either from :root[data-color-scheme] or user system setting
+     *
+     * @method get_color_scheme
+     * @public
+     * @returns {String}
+     */
+    get_color_scheme: function () {
+        let state = this.ui.body.attr('data-color-scheme');
+
+        if (!state && window.matchMedia) {
+            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                state = 'dark'; // dark mode
+            } else {
+                state = 'light';
+            }
+        }
+        return state;
+    },
+
+    /**
+     * Sets the color scheme for the current document and all iframes contained.
+     *
+     * @method set_color_scheme
+     * @public
+     * @param scheme {String}
+     * @retiurns {void}
+     */
+
+    set_color_scheme: function (scheme) {
+        CMS.API.Helpers.setSettings({ color_scheme: scheme });
+        if (scheme === 'auto') {
+            this.ui.body.removeAttr('data-color-scheme');
+            this.ui.body.find('div.cms iframe').each(function(i, e) {
+                delete e.contentDocument.documentElement.dataset.colorScheme;
+            });
+        } else {
+            this.ui.body.attr('data-color-scheme', scheme);
+            this.ui.body.find('div.cms iframe').each(function setFrameColorScheme(i, e) {
+                if (e.contentDocument) {
+                    e.contentDocument.documentElement.dataset.colorScheme = scheme;
+                    // ckeditor (and potentially other apps) have iframes inside their admin forms
+                    // also set color scheme there
+                    $(e.contentDocument).find('iframe').each(setFrameColorScheme);
+                }
+            });
+        }
     }
 });
 

diff --git a/cms/static/cms/sass/cms.base.scss b/cms/static/cms/sass/cms.base.scss
@@ -18,6 +18,7 @@
 @import "components/dialog";
 @import "components/content";
 @import "components/loader";
+@import "components/dark-mode-toggle";
 
 // div.cms needs to beat .cms-reset a selectors
 div.cms {
@@ -33,8 +34,6 @@ div.cms {
     @import "components/pluginpicker";
     @import "components/shortcuts";
 
-    color-scheme: light dark;
-
     *:not(.cms-modal):focus {
         outline: 2px dotted $gray-darker;
         outline-offset: -3px;

diff --git a/cms/static/cms/sass/components/_dark-mode-toggle.scss b/cms/static/cms/sass/components/_dark-mode-toggle.scss
@@ -0,0 +1,25 @@
+@use "sass:math";
+
+div.cms .cms-toolbar-item-dark-mode-toggle span.cms-icon.cms-toggle {
+    font-size: 170%;
+    line-height: 150%;
+    color: var(--dca-gray-darkest);
+}
+
+html[data-color-scheme="light"] .cms-toolbar-item-dark-mode-toggle .cms-toggle {
+    @extend .cms-icon-moon;
+}
+
+html[data-color-scheme="dark"] .cms-toolbar-item-dark-mode-toggle .cms-toggle {
+    @extend .cms-icon-sun;
+}
+
+html:not([data-color-scheme]) .cms-toolbar-item-dark-mode-toggle .cms-toggle {
+    @extend .cms-icon-moon;
+}
+
+@media (prefers-color-scheme: dark) {
+   html:not([data-color-scheme]) .cms-toolbar-item-dark-mode-toggle .cms-toggle {
+       // @extend .cms-icon-sun;
+    }
+}
diff --git a/cms/static/cms/sass/components/_dialog.scss b/cms/static/cms/sass/components/_dialog.scss
@@ -1,5 +1,6 @@
 //##############################################################################
 // DIALOG
+@use "sass:math";
 
 // used in: /cms/admin/page/tree/copy_premissions
 .cms-dialog {
@@ -9,7 +10,7 @@
     z-index: z(dialog);
     box-sizing: border-box;
     width: $dialog-width;
-    margin: -100px 0 0 (-$dialog-width/2);
+    margin: -100px 0 0  math.div(-$dialog-width, 2);
     padding: $padding-large;
     border: 1px solid $gray-lighter;
     border-radius: $dialog-border-radius;

diff --git a/cms/static/cms/sass/components/_hovertooltip.scss b/cms/static/cms/sass/components/_hovertooltip.scss
@@ -1,5 +1,6 @@
 //##############################################################################
 // TOOLTIP
+@use "sass:math";
 
 .cms-hover-tooltip {
     position: relative;
@@ -84,7 +85,7 @@
 }
 
 .cms-hover-tooltip:after {
-    margin-left: -$hover-tooltip-width / 2;
+    margin-left: math.div(-$hover-tooltip-width, 2);
 }
 
 .cms-hover-tooltip:hover:before,

diff --git a/cms/static/cms/sass/components/_iconography.scss b/cms/static/cms/sass/components/_iconography.scss
@@ -101,42 +101,48 @@
     @if $filename == minus {
         $char: "E019";
     }
-    @if $filename == paste {
+    @if $filename == moon {
         $char: "E01A";
     }
-    @if $filename == pencil {
+    @if $filename == paste {
         $char: "E01B";
     }
-    @if $filename == pin {
+    @if $filename == pencil {
         $char: "E01C";
     }
-    @if $filename == plugins {
+    @if $filename == pin {
         $char: "E01D";
     }
-    @if $filename == plus-square-o {
+    @if $filename == plugins {
         $char: "E01E";
     }
-    @if $filename == plus {
+    @if $filename == plus-square-o {
         $char: "E01F";
     }
-    @if $filename == puzzle {
+    @if $filename == plus {
         $char: "E020";
     }
-    @if $filename == scissors {
+    @if $filename == puzzle {
         $char: "E021";
     }
-    @if $filename == search {
+    @if $filename == scissors {
         $char: "E022";
     }
-    @if $filename == sitemap {
+    @if $filename == search {
         $char: "E023";
     }
-    @if $filename == squares {
+    @if $filename == sitemap {
         $char: "E024";
     }
-    @if $filename == window {
+    @if $filename == squares {
         $char: "E025";
     }
+    @if $filename == sun {
+        $char: "E026";
+    }
+    @if $filename == window {
+        $char: "E027";
+    }
 
     @return $char;
 }
@@ -257,6 +263,10 @@
     @include icon(minus);
 }
 
+.cms-icon-moon {
+    @include icon(moon);
+}
+
 .cms-icon-paste {
     @include icon(paste);
 }
@@ -301,6 +311,10 @@
     @include icon(squares);
 }
 
+.cms-icon-sun {
+    @include icon(sun);
+}
+
 .cms-icon-window {
     @include icon(window);
 }
diff --git a/cms/static/cms/sass/components/_modal.scss b/cms/static/cms/sass/components/_modal.scss
@@ -1,6 +1,8 @@
 //##############################################################################
 // MODAL
 
+@use "sass:math";
+
 // Editing plugins in frontend
 .cms-modal {
     display: none;
@@ -151,7 +153,7 @@
     display: block;
     position: absolute;
     top: 50%;
-    margin-top: -$modal-header-button-area-size / 2;
+    margin-top:  math.div(-$modal-header-button-area-size, 2);
     right: $padding-normal;
     color: $gray-light;
     text-align: center;
@@ -160,7 +162,7 @@
     cursor: pointer;
     &:before {
         position: relative;
-        top: ($modal-header-button-area-size - $icon-size) / 2;
+        top:  math.div($modal-header-button-area-size - $icon-size, 2);
     }
     &:hover {
         color: $color-primary;
@@ -250,7 +252,7 @@
     padding: 0 $modal-resize-size 0 $padding-normal;
 }
 .cms-modal-item-buttons {
-    $margin: ($toolbar-height - $toolbar-button-height) / 2;
+    $margin:  math.div($toolbar-height - $toolbar-button-height, 2);
     @extend .cms-toolbar-item-buttons;
     float: right;
     margin-left: $margin;
@@ -262,10 +264,10 @@
 // alter footer when html markup is loaded
 .cms-modal-markup {
     .cms-modal-foot {
-        height: $modal-footer-height / 2;
+        height:  math.div($modal-footer-height, 2);
     }
     .cms-modal-body {
-        bottom: $modal-footer-height / 2;
+        bottom:  math.div($modal-footer-height, 2);
     }
 }