fix theme toggle bug

mnyrop · mnyrop · commit 27e519edf648 · 2024-06-26T17:52:25.000-04:00
diff --git a/site/_includes/partials/header.html b/site/_includes/partials/header.html
@@ -61,7 +61,7 @@
       </div>
       <!-- end big menu -->
       <label id="toggle-darkmode" aria-label="light/dark mode toggle switch" class="cursor-pointer grid place-items-center">
-        <input type="checkbox" value="dark" class="toggle theme-controller bg-base-content row-start-1 col-start-1 col-span-2"/>
+        <input id="toggle-darkmode-checkbox" type="checkbox" value="dark" class="toggle theme-controller bg-base-content row-start-1 col-start-1 col-span-2"/>
         <svg class="col-start-1 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <circle cx="12" cy="12" r="5"/>
           <path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/>
diff --git a/site/assets/theme-toggle-local.js b/site/assets/theme-toggle-local.js
@@ -3,6 +3,7 @@ const setColorMode = (mode) => {
   if (mode) {
     // Update data-* attr on html
     document.documentElement.setAttribute('data-force-color-mode', mode);
+    document.documentElement.setAttribute('data-theme', mode);
     // Persist in local storage
     window.localStorage.setItem('color-mode', mode);
     // Make sure the checkbox is up-to-date
@@ -35,15 +36,21 @@ mediaQuery.addListener(() => {
   // Make sure the checkbox is up-to-date
   document.querySelector('#toggle-darkmode').checked = mediaQuery.matches;
 });
+
+
 // Check if there's any override. If so, let the markup know by setting an attribute on the <html> element
 const colorModeOverride = window.localStorage.getItem('color-mode');
 const hasColorModeOverride = typeof colorModeOverride === 'string';
 if (hasColorModeOverride) {
-  document.documentElement.setAttribute('data-force-color-mode', colorModeOverride);
+  setColorMode(colorModeOverride);
 }
+
 // Check the dark-mode checkbox if
 // - The override is set to dark
 // - No override is set but the system prefers dark mode
-if ((colorModeOverride == 'dark') || (!hasColorModeOverride && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-  document.querySelector('#toggle-darkmode').checked = true;
-}
+if ((colorModeOverride == 'dark') || (window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+  document.querySelector('#toggle-darkmode-checkbox').checked = true;
+} 
+if ((colorModeOverride == 'light') || (window.matchMedia('(prefers-color-scheme: light)').matches)) {
+  document.querySelector('#toggle-darkmode-checkbox').checked = false;
+} 
