dark mode theme strategy/dataset strategy

templates/element/javascript/dark_mode_bottom.php

@@ -5,7 +5,7 @@ use Cake\Core\Configure;
 /**
  * @var \App\View\AppView $this
  */
-$strategy = Configure::read('CheeseCake.darkMode.strategy', 'class');
+$strategy = Configure::read('CheeseCake.darkMode.strategy', 'dataset');
 
 ?>
 <script>
@@ -17,12 +17,13 @@ $strategy = Configure::read('CheeseCake.darkMode.strategy', 'class');
             toggleDarkLink.addEventListener('click', function (e) {
                 e.preventDefault();
                 localStorage.theme = 'dark';
-            <?php if ($strategy === 'class') : ?>
+                console.debug('dark');
+                <?php if ($strategy === 'class') : ?>
                 document.documentElement.classList.add('dark');
                 document.documentElement.classList.remove('auto');
-            <?php else : ?>
+                <?php else : ?>
                 document.documentElement.dataset.theme = 'dark';
-            <?php endif; ?>
+                <?php endif; ?>
 
             });
         }
@@ -30,26 +31,27 @@ $strategy = Configure::read('CheeseCake.darkMode.strategy', 'class');
             toggleLightLink.addEventListener('click', function (e) {
                 e.preventDefault();
                 localStorage.theme = 'light';
-            <?php if ($strategy === 'class') : ?>
+                console.debug('light');
+                <?php if ($strategy === 'class') : ?>
                 document.documentElement.classList.remove('auto');
                 document.documentElement.classList.remove('dark');
-            <?php else : ?>
+                <?php else : ?>
                 document.documentElement.dataset.theme = 'light';
-            <?php endif; ?>
+                <?php endif; ?>
             });
         }
         if (toggleAutoLink) {
             toggleAutoLink.addEventListener('click', function (e) {
                 e.preventDefault();
                 localStorage.theme = 'auto';
-            <?php if ($strategy === 'class') : ?>
+                <?php if ($strategy === 'class') : ?>
                 document.documentElement.classList.add('auto');
                 document.documentElement.classList.remove('dark');
 
-            <?php else : ?>
+                <?php else : ?>
                 delete document.documentElement.dataset.theme;
-            <?php endif; ?>
+                <?php endif; ?>
             });
         }
     })
-</script>
+</script>

templates/element/javascript/dark_mode_top.php

@@ -1,11 +1,17 @@
 <?php
+
+use Cake\Core\Configure;
+
 /**
  * @var \App\View\AppView $this
  */
+$strategy = Configure::read('CheeseCake.darkMode.strategy', 'dataset');
 
 ?>
 <script>
     // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+    <?php if ($strategy === 'class') : ?>
+
     document.documentElement.classList.toggle(
         "dark",
         localStorage.theme === "dark" ||
@@ -15,6 +21,13 @@
         "auto",
         localStorage.theme === "auto"
     );
+    <?php else : ?>
+    localStorage.theme === "dark" ||
+    (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches) ?
+        document.documentElement.dataset.theme = "dark" :
+        document.documentElement.dataset.theme = "light";
+    <?php endif; ?>
+
     // Whenever the user explicitly chooses light mode
 
     // localStorage.theme = "light";
@@ -22,5 +35,4 @@
     // localStorage.theme = "dark";
     // // Whenever the user explicitly chooses to respect the OS preference
     // localStorage.removeItem("theme");
-</script>
-
+</script>