dark mode strategy

templates/element/javascript/dark_mode_bottom.php

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