add dark/light mode toggle with OS preference detection

Uses Bootstrap 5.3 data-bs-theme attribute for automatic component theming. Adds CSS custom properties for dark mode, a toggle button in the header, localStorage persistence, and a flash-prevention script. Background image overlay adjusts per theme. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-21 23:27:53 -05:00
parent e2e10e9d9b
commit a978df4af9
3 changed files with 142 additions and 10 deletions
@@ -1,4 +1,15 @@
 <body class="s-lib-public-body">
+  <script>
+    // Prevent flash of wrong theme by applying saved/OS preference immediately
+    (function() {
+      var stored = localStorage.getItem("kbcc-theme");
+      var prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+      var isDark = stored ? stored === "dark" : prefersDark;
+      if (isDark) {
+        document.body.setAttribute("data-bs-theme", "dark");
+      }
+    })();
+  </script>
  <!-- Google Tag Manager (noscript) -->
  <noscript>
    <iframe
@@ -65,6 +76,14 @@
              <div id="login-text">Login</div>
              <div id="login-icon"><i class="fas fa-user" aria-hidden="true"></i></div>
            </a>
+            <button
+              id="theme-toggle"
+              @click="toggleTheme"
+              :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+              type="button"
+            >
+              <i :class="isDark ? 'fas fa-sun' : 'fas fa-moon'" aria-hidden="true"></i>
+            </button>
            <img
              id="library-logo"
              class="image-fail"