feat: Configurable dark mode (color scheme) (#460)

* Add:		Dark color scheme
* Fix:		Remove !important statements preventing forms to implement dark mode
* Fix:		Final color values
* Fix:		Announce dark mode to the browser for scrollbar coloring
* Add:		configurable color scheme
* Fix:		Propagate dark mode to iframes
* Fix:		color scheme switch as css variables
* Fix:		Cascade settings into iframes of iframes (e.g., cms plugins inside ckeditor)

Author: fsbraun

djangocms_admin_style/sass/components/_sideframe.scss

@@ -2,7 +2,6 @@
 // SIDEFRAME
 
 .cms-admin-sideframe {
-    color-scheme: light dark;
     #header {
         // because there is already toolbar visible, header in side frame has to be hidden to not be visible when scrolling on tablet #245
         display: none;

djangocms_admin_style/sass/settings/_all.scss

@@ -1,2 +1,3 @@
+@import "reset-django-dark-mode";
 @import "cms";
 @import "custom";

djangocms_admin_style/sass/settings/_cms.scss

@@ -35,6 +35,12 @@ $gray-super-lightest: var(--dca-gray-super-lightest); //;
 
 :root {
     color-scheme: dark light;
+}
+
+:root[data-color-scheme="light"] {
+    color-scheme: light;
+    --dca-light-mode: 1;
+    --dca-dark-mode: 0;
     --dca-white: #FFFFFF;
     --dca-black: #000000;
     --dca-primary: #00bbff;
@@ -47,18 +53,41 @@ $gray-super-lightest: var(--dca-gray-super-lightest); //;
     --dca-gray-super-lightest: #f7f7f7;
 }
 
+:root[data-color-scheme="dark"] {
+    color-scheme: dark;
+    --dca-light-mode: 0;
+    --dca-dark-mode: 1;
+    --dca-white: #2A2C2E;
+    --dca-black: #FFF;
+    --dca-primary: #58D1FC;
+    --dca-gray: #999; // $gray-light;
+    --dca-gray-lightest: #444; //$gray-darkest;
+    --dca-gray-lighter: #666; //$gray-darker;
+    --dca-gray-light: #888; // $gray-light;
+    --dca-gray-darker: #aaa; //$gray;
+    --dca-gray-darkest: #eee; // $gray-lighter;
+    --dca-gray-super-lightest: #333;
+
+    --active-brightness: 2;
+    --focus-brightness: 1.5;
+}
 @media (prefers-color-scheme: dark) {
-   :root {
-       --dca-white: #2A2C2E;
-       --dca-black: #FFF;
-       --dca-primary: #58D1FC;
-       --dca-gray: #999; //$gray-light;
-       --dca-gray-lightest: #444; //$gray-darkest;
-       --dca-gray-lighter: #666; //$gray-darker;
-       --dca-gray-light: #888; // $gray-light;
-       --dca-gray-darker: #aaa; //$gray;
-       --dca-gray-darkest: #eee; // $gray-lighter;
-       --dca-gray-super-lightest: #333;
+    :root:not([data-color-scheme]) {
+        --dca-light-mode: 0;
+        --dca-dark-mode: 1;
+        --dca-white: #2A2C2E;
+        --dca-black: #FFF;
+        --dca-primary: #58D1FC;
+        --dca-gray: #999; // $gray-light;
+        --dca-gray-lightest: #444; //$gray-darkest;
+        --dca-gray-lighter: #666; //$gray-darker;
+        --dca-gray-light: #888; // $gray-light;
+        --dca-gray-darker: #aaa; //$gray;
+        --dca-gray-darkest: #eee; // $gray-lighter;
+        --dca-gray-super-lightest: #333;
+
+        --active-brightness: 2;
+        --focus-brightness: 1.5;
     }
 }
 

djangocms_admin_style/sass/settings/_reset-django-dark-mode.scss

@@ -0,0 +1,88 @@
+:root[data-color-scheme="light"] {
+    --primary: #79aec8;
+    --secondary: #417690;
+    --accent: #f5dd5d;
+    --primary-fg: #fff;
+
+    --body-fg: #333;
+    --body-bg: #fff;
+    --body-quiet-color: #666;
+    --body-loud-color: #000;
+
+    --header-color: #ffc;
+    --header-branding-color: var(--accent);
+    --header-bg: var(--secondary);
+    --header-link-color: var(--primary-fg);
+
+    --breadcrumbs-fg: #c4dce8;
+    --breadcrumbs-link-fg: var(--body-bg);
+    --breadcrumbs-bg: var(--primary);
+
+    --link-fg: #447e9b;
+    --link-hover-color: #036;
+    --link-selected-fg: #5b80b2;
+
+    --hairline-color: #e8e8e8;
+    --border-color: #ccc;
+
+    --error-fg: #ba2121;
+
+    --message-success-bg: #dfd;
+    --message-warning-bg: #ffc;
+    --message-error-bg: #ffefef;
+
+    --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
+    --selected-bg: #e4e4e4; /* E.g. selected table cells */
+    --selected-row: #ffc;
+
+    --button-fg: #fff;
+    --button-bg: var(--primary);
+    --button-hover-bg: #609ab6;
+    --default-button-bg: var(--secondary);
+    --default-button-hover-bg: #205067;
+    --close-button-bg: #888; /* Previously #bbb, contrast 1.92 */
+    --close-button-hover-bg: #747474;
+    --delete-button-bg: #ba2121;
+    --delete-button-hover-bg: #a41515;
+
+    --object-tools-fg: var(--button-fg);
+    --object-tools-bg: var(--close-button-bg);
+    --object-tools-hover-bg: var(--close-button-hover-bg);
+}
+
+:root[data-color-scheme="dark"] {
+    --primary: #264b5d;
+    --primary-fg: #f7f7f7;
+
+    --body-fg: #eeeeee;
+    --body-bg: #121212;
+    --body-quiet-color: #e0e0e0;
+    --body-loud-color: #ffffff;
+
+    --breadcrumbs-link-fg: #e0e0e0;
+    --breadcrumbs-bg: var(--primary);
+
+    --link-fg: #81d4fa;
+    --link-hover-color: #4ac1f7;
+    --link-selected-fg: #6f94c6;
+
+    --hairline-color: #272727;
+    --border-color: #353535;
+
+    --error-fg: #e35f5f;
+    --message-success-bg: #006b1b;
+    --message-warning-bg: #583305;
+    --message-error-bg: #570808;
+
+    --darkened-bg: #212121;
+    --selected-bg: #1b1b1b;
+    --selected-row: #00363a;
+
+    --close-button-bg: #333333;
+    --close-button-hover-bg: #666666;
+
+
+    --object-tools-fg: var(--button-fg);
+    --object-tools-bg: var(--close-button-bg);
+    --object-tools-hover-bg: var(--close-button-hover-bg);
+}

djangocms_admin_style/static/djangocms_admin_style/css/djangocms-admin.css

@@ -6,6 +6,7 @@ var initRelatedWidgetWrappers = require('./modules/related-widget-wrapper');
 var initToolbarDropdown = require('./modules/toolbar-dropdown');
 var initUpdateNotification = require('./modules/update-notification');
 var preventDoubleFormSubmissions = require('./modules/form-submit');
+var darkModeSettings = require('./modules/dark-mode');
 
 // this attaches to global jQuery because
 // we need to touch punch the things like sortedm2m
@@ -22,4 +23,5 @@ $(function () {
     initToolbarDropdown();
     initUpdateNotification();
     preventDoubleFormSubmissions();
+    darkModeSettings();
 });

djangocms_admin_style/static/djangocms_admin_style/js/base-admin.js

@@ -0,0 +1,30 @@
+/**
+ * Get color scheme from parent document (if in iframe) else set to white
+ *
+ * @function darkModeSettings
+ * @returns {void}
+ */
+function darkModeSettings() {
+    if (!document.documentElement.dataset.colorScheme) {
+        var colorScheme = 'light'; // Default mode
+        var cms_window = window;
+
+        while (cms_window.parent !== cms_window) {
+            cms_window = cms_window.parent;
+        }
+        if (cms_window.CMS && cms_window.CMS.config) {
+            if (cms_window.CMS.settings.color_scheme) {
+                // Use color_scheme from settings.py
+                colorScheme = cms_window.CMS.settings.color_scheme;
+            } else if (cms_window.CMS.config.color_scheme) {
+                // If overwritten by config use config. This is the toggle button
+                colorScheme = cms_window.CMS.config.color_scheme;
+            }
+        }
+        if (colorScheme !== 'auto') {
+            document.documentElement.dataset.colorScheme = colorScheme;
+        }
+    }
+}
+
+module.exports = darkModeSettings;