Fixing bugs and docs issues

docs/src/_includes/layouts/base.njk

@@ -3,25 +3,37 @@
 <head>
   {# Dark mode #}
   <script>
-    (function() {
+    (() => {
       try {
-        const storedMode = localStorage.getItem('darkMode');
-        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        if (storedMode === 'dark' || (storedMode === null && prefersDark)) document.documentElement.classList.add('dark');
-      } catch (e) {
-        console.error('Could not apply dark mode from localStorage', e);
-      }
+        const stored = localStorage.getItem('themeMode');
+        if (stored ? stored === 'dark'
+                   : matchMedia('(prefers-color-scheme: dark)').matches) {
+          document.documentElement.classList.add('dark');
+        }
+      } catch (_) {}
+
+      const apply = dark => {
+        document.documentElement.classList.toggle('dark', dark);
+        try { localStorage.setItem('themeMode', dark ? 'dark' : 'light'); } catch (_) {}
+      };
+
+      document.addEventListener('basecoat:theme', (event) => {
+        const mode = event.detail?.mode;
+        apply(mode === 'dark' ? true
+             : mode === 'light' ? false
+             : !document.documentElement.classList.contains('dark'));
+      });
     })();
   </script>
-  <script src="/assets/js/dark-mode.js" defer></script>
+  <script src="/assets/js/theme-switcher.js" defer></script>
   {# Theme variant #}
   <script>
     (function() {
       try {
         const storedTheme = localStorage.getItem('themeVariant');
         if (storedTheme) document.documentElement.classList.add(`theme-${storedTheme}`);
-      } catch (e) {
-        console.error('Could not apply theme variant from localStorage', e);
+      } catch (event) {
+        console.error('Could not apply theme variant from localStorage', event);
       }
     })();
   </script>

docs/src/_includes/partials/header.njk

@@ -1,7 +1,7 @@
 <div class="flex h-14 w-full items-center gap-2 px-4">
   <button
     type="button"
-    onclick="window.dispatchEvent(new CustomEvent('sidebar:toggle'))"
+    onclick="document.dispatchEvent(new CustomEvent('basecoat:sidebar'))"
     aria-label="Toggle sidebar"
     data-tooltip="Toggle sidebar"
     data-side="bottom"
@@ -44,7 +44,7 @@
     aria-label="Toggle dark mode"
     data-tooltip="Toggle dark mode"
     data-side="bottom"
-    data-action="toggle-dark-mode"
+    onclick="document.dispatchEvent(new CustomEvent('basecoat:theme'))"
     class="btn-icon-outline size-8"
   >
     <span class="hidden dark:block">{% lucide "sun" %}</span>

docs/src/_includes/partials/kitchen-sink/slider.njk

@@ -31,6 +31,6 @@
     };
 
     updateSlider(sliderEl);
-    sliderEl.addEventListener('input', (e) => updateSlider(e.target));
+    sliderEl.addEventListener('input', (event) => updateSlider(event.target));
   })();
 </script>