feat: Update dark mode switch to be compatible with Django 4.2 admin dark mode (#491)

* Bump version to 3.2.4
* Fix:  Add support for Django 4.2 color scheme switch while maintaining backwards compatibility
* fix linter
* Remove unnecessary line in JS
* Update css

Author: fsbraun

djangocms_admin_style/sass/settings/_cms.scss

@@ -37,7 +37,10 @@ $gray-super-lightest: var(--dca-gray-super-lightest); //;
     color-scheme: dark light;
 }
 
-:root[data-color-scheme="light"], :root:not([data-color-scheme]) {
+:root[data-color-scheme="light"],
+:root:not([data-color-scheme]):not([data-theme]),
+:root[data-theme="light"],
+:root[data-theme="auto"] {
     color-scheme: light;
     --dca-light-mode: 1;
     --dca-dark-mode: 0;
@@ -53,7 +56,7 @@ $gray-super-lightest: var(--dca-gray-super-lightest); //;
     --dca-gray-super-lightest: #f7f7f7;
 }
 
-:root[data-color-scheme="dark"] {
+:root[data-color-scheme="dark"], :root[data-theme="dark"] {
     color-scheme: dark;
     --dca-light-mode: 0;
     --dca-dark-mode: 1;
@@ -72,7 +75,8 @@ $gray-super-lightest: var(--dca-gray-super-lightest); //;
     --focus-brightness: 1.5;
 }
 @media (prefers-color-scheme: dark) {
-    :root:not([data-color-scheme]) {
+    :root:not([data-color-scheme]):not([data-theme]),
+    :root[data-theme="auto"] {
         --dca-light-mode: 0;
         --dca-dark-mode: 1;
         --dca-white: #2A2C2E;

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

@@ -1,4 +1,5 @@
-:root[data-color-scheme="light"] {
+:root[data-color-scheme="light"],
+:root[data-theme="light"] {
     --primary: #79aec8;
     --secondary: #417690;
     --accent: #f5dd5d;
@@ -50,7 +51,8 @@
     --object-tools-hover-bg: var(--close-button-hover-bg);
 }
 
-:root[data-color-scheme="dark"] {
+:root[data-color-scheme="dark"],
+:root[data-theme="dark"] {
     --primary: #264b5d;
     --primary-fg: #f7f7f7;
 

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

@@ -40,22 +40,30 @@ function getColorSchemeFromSettings(CMS) {
  * @returns {void}
  */
 function darkModeSettings() {
-    if (!document.documentElement.dataset.colorScheme) {
-        var colorScheme = 'auto'; // Default mode
-        var cms_window = getTopWindow();
-
-        if (cms_window.CMS) {
-            colorScheme = getColorSchemeFromSettings(cms_window.CMS);
-        } else if (window.localStorage) {
-            // CMS not loaded: set color scheme for admin site according to settings
-            colorScheme = JSON.parse(localStorage.getItem('cms_cookie') || '{}').color_scheme;
-        }
-        if (colorScheme === 'auto' || colorScheme === undefined) {
-            delete document.documentElement.dataset.colorScheme;
-        } else {
-            document.documentElement.dataset.colorScheme = colorScheme;
+    var colorScheme = document.documentElement.dataset.theme;
+
+    if (!colorScheme) {
+        colorScheme = localStorage.getItem('theme');
+        if (!colorScheme) {
+            if (!document.documentElement.dataset.colorScheme) {
+                var cms_window = getTopWindow();
+
+                if (cms_window.CMS) {
+                    colorScheme = getColorSchemeFromSettings(cms_window.CMS);
+                } else {
+                    // CMS not loaded: set color scheme for admin site according to settings
+                    colorScheme = JSON.parse(localStorage.getItem('cms_cookie') || '{}').color_scheme;
+                }
+
+                if (colorScheme === 'auto' || colorScheme === undefined) {
+                    document.documentElement.dataset.theme = 'auto';
+                } else {
+                    document.documentElement.dataset.theme = colorScheme;
+                }
+            }
         }
     }
+    document.documentElement.dataset.theme = colorScheme;
 }
 
 module.exports = darkModeSettings;