Merge pull request #7556 from fsbraun/fix/django_dark_mode

fix: Respect system presets when color scheme (dark mode) is enabled
django-cms · May 22, 2023 · 8b8b807 · 8b8b807
2 parents aadbce4 + a52ce11
commit 8b8b807
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/cms/static/cms/js/modules/cms.base.js b/cms/static/cms/js/modules/cms.base.js
@@ -481,7 +481,7 @@ export const Helpers = {
         let state = $('html').attr('data-theme');
 
         if (!state) {
-            state = localStorage.getItem('theme') || 'auto';
+            state = localStorage.getItem('theme') || CMS.config.color_scheme || 'auto';
         }
         return state;
     },
@@ -499,7 +499,11 @@ export const Helpers = {
         let body = $('html');
         let scheme = (mode !== 'light' && mode !== 'dark') ? 'auto' : mode;
 
-        localStorage.setItem('theme', scheme);
+        if (localStorage.getItem('theme') || CMS.config.color_scheme !== scheme) {
+            // Only set local storage if it is either already set or if scheme differs from preset
+            // to avoid fixing the user setting to the preset (which would ignore a change in presets)
+            localStorage.setItem('theme', scheme);
+        }
 
         body.attr('data-theme', scheme);
         body.find('div.cms iframe').each(function setFrameColorScheme(i, e) {

diff --git a/cms/static/cms/js/modules/cms.toolbar.js b/cms/static/cms/js/modules/cms.toolbar.js
@@ -423,7 +423,7 @@ var Toolbar = new Class({
 
         // set color scheme
         Helpers.setColorScheme (
-            localStorage.getItem('theme') || 'auto'
+            localStorage.getItem('theme') || CMS.config.color_scheme || 'auto'
         );
 
         // check if there are messages and display them

diff --git a/docs/topics/colorscheme.rst b/docs/topics/colorscheme.rst
@@ -35,16 +35,20 @@ setting in your project's ``setting.py``:
 .. hint::
 
     If you plan to fix the color scheme to either light or dark, add a corresponding
-    ``data-color-scheme`` attribute to the ``html`` tag in your base template, e.g.
+    ``data-theme`` attribute to the ``html`` tag in your base template, e.g.
 
     .. code-block::
 
-        <html data-color-scheme="light">
+        <html data-theme="light">
 
     This will pin the color scheme early when loading pages and avoid potential
     flickering if the browser preference differs from the ``CMS_COLOR_SCHEME``
     setting.
 
+.. versionchanged:: 3.11.4
+
+    Before version 3.11.4 the color scheme was set by ``data-color-scheme``. Since version 3.11.4 django CMS uses ``data-theme`` just as Django since version 4.2.
+
 
 .. important::