Add support for light mode

resources/css/app.css

@@ -77,6 +77,46 @@
     }
 }
 
+:root {
+    color-scheme: dark;
+
+    --theme-bg: var(--color-zinc-900);
+    --theme-fg: var(--color-zinc-200);
+    --theme-muted: var(--color-zinc-400);
+    --theme-border: var(--color-zinc-700);
+    --theme-surface-raised: var(--color-zinc-800);
+    --theme-surface-inset: var(--color-zinc-900);
+    --theme-overlay: rgb(24 24 27 / 0.8);
+    --theme-accent: var(--color-rose-500);
+    --theme-accent-hover: var(--color-rose-600);
+    --theme-accent-contrast: var(--color-white);
+    --theme-code-bg: var(--color-zinc-900);
+    --theme-code-text: var(--color-zinc-300);
+    --theme-prose-body: var(--color-zinc-300);
+    --theme-prose-heading: var(--color-zinc-100);
+    --theme-prose-link: var(--color-rose-400);
+}
+
+html.light {
+    color-scheme: light;
+
+    --theme-bg: var(--color-white);
+    --theme-fg: var(--color-zinc-950);
+    --theme-muted: var(--color-zinc-600);
+    --theme-border: var(--color-zinc-200);
+    --theme-surface-raised: var(--color-zinc-50);
+    --theme-surface-inset: var(--color-zinc-100);
+    --theme-overlay: rgb(250 250 250 / 0.82);
+    --theme-accent: var(--color-rose-500);
+    --theme-accent-hover: var(--color-rose-600);
+    --theme-accent-contrast: var(--color-white);
+    --theme-code-bg: var(--color-zinc-100);
+    --theme-code-text: var(--color-zinc-800);
+    --theme-prose-body: var(--color-zinc-700);
+    --theme-prose-heading: var(--color-zinc-950);
+    --theme-prose-link: var(--color-rose-700);
+}
+
 @layer base {
     html {
         height: 100%;

resources/js/darkmode.js

@@ -1,18 +1,56 @@
+const readMode = () => {
+    try {
+        return ['dark', 'light', 'system'].includes(localStorage.theme) ? localStorage.theme : 'dark';
+    } catch (e) {
+        return 'dark';
+    }
+};
+
+const storeMode = (mode) => {
+    try {
+        localStorage.theme = mode;
+    } catch (e) {}
+};
+
 export default () => ({
-    mode: localStorage.theme,
+    mode: readMode(),
+    systemTheme: window.matchMedia('(prefers-color-scheme: light)'),
+    systemListener: null,
+    get isLight() {
+        return this.mode === 'light';
+    },
+    get isDark() {
+        return this.mode === 'dark';
+    },
+    get isSystem() {
+        return this.mode === 'system';
+    },
+    get nextMode() {
+        return { dark: 'light', light: 'system', system: 'dark' }[this.mode];
+    },
     init() {
-        if (!('theme' in localStorage)) {
-            localStorage.theme = 'dark';
-        }
+        this.systemListener = () => {
+            if (this.isSystem) this.apply();
+        };
+        this.systemTheme.addEventListener('change', this.systemListener);
+        this.setMode(readMode());
+    },
+    destroy() {
+        this.systemTheme.removeEventListener('change', this.systemListener);
+    },
+    apply() {
+        const light = this.isLight || (this.isSystem && this.systemTheme.matches);
 
-        this.apply(localStorage.theme);
+        document.documentElement.classList.toggle('light', light);
+        document.documentElement.classList.toggle('dark', !light);
+        document.querySelector('meta[name="theme-color"]').content = light ? '#ffffff' : '#18181b';
     },
-    apply(mode) {
-        document.documentElement.classList[mode === 'dark' ? 'add' : 'remove']('dark');
+    setMode(mode) {
+        this.mode = ['dark', 'light', 'system'].includes(mode) ? mode : 'dark';
+        storeMode(this.mode);
+        this.apply();
     },
     toggle() {
-        localStorage.theme = this.mode = this.mode === 'dark' ? 'light' : 'dark';
-
-        this.apply(this.mode);
+        this.setMode(this.nextMode);
     }
 })

resources/views/_partials/nav.blade.php

@@ -51,6 +51,21 @@ class="fixed z-[100] w-56 overflow-hidden rounded-xl border border-zinc-700 bg-z
                 Search docs
                 <kbd class="text-2xs ml-auto rounded-sm border border-zinc-700 bg-zinc-900 px-1 py-px font-sans">⌘K</kbd>
             </button>
+            <div x-data="ToggleDark">
+                <button @click="toggle()" :aria-label="`Theme: ${mode}. Switch to ${nextMode} theme`" :aria-pressed="isSystem ? 'mixed' : isLight" aria-label="Theme: dark. Switch to light theme" aria-pressed="false" class="active:scale-96 flex size-8 items-center justify-center text-zinc-400 transition hover:text-zinc-200" type="button">
+                    <svg x-show="isLight" x-cloak aria-hidden="true" class="size-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" stroke="currentColor" viewBox="0 0 24 24">
+                        <circle cx="12" cy="12" r="3.5" />
+                        <path d="M12 2v2M12 20v2M4.93 4.93l1.42 1.42M17.65 17.65l1.42 1.42M2 12h2M20 12h2M4.93 19.07l1.42-1.42M17.65 6.35l1.42-1.42" />
+                    </svg>
+                    <svg x-show="isDark" aria-hidden="true" class="size-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" stroke="currentColor" viewBox="0 0 24 24">
+                        <path d="M20.5 15.5A8.5 8.5 0 0 1 8.5 3.5a8.5 8.5 0 1 0 12 12Z" />
+                    </svg>
+                    <svg x-show="isSystem" x-cloak aria-hidden="true" class="size-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" stroke="currentColor" viewBox="0 0 24 24">
+                        <rect x="3" y="4" width="18" height="13" rx="2" />
+                        <path d="M8 21h8M12 17v4" />
+                    </svg>
+                </button>
+            </div>
             <button @click.prevent="toggle()" aria-label="Toggle Documentation Navigation" class="active:scale-96 flex size-8 items-center justify-center text-zinc-400 transition hover:text-zinc-200 lg:hidden" type="button">
                 <svg class="size-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" stroke="currentColor" viewBox="0 0 24 24">
                     <path d="M4 7h16M4 12h16M4 17h16" />

resources/views/layouts/base.blade.php

@@ -42,6 +42,20 @@
     <link rel="apple-touch-icon" href="/www/apple-touch-icon.png" sizes="180x180">
     <link rel="manifest" href="/www/site.webmanifest">
     <meta name="theme-color" content="#18181b">
+    <meta name="color-scheme" content="dark light">
+    <script>
+        (() => {
+            let theme = 'dark';
+
+            try { theme = ['dark', 'light', 'system'].includes(localStorage.theme) ? localStorage.theme : 'dark'; } catch (e) {}
+
+            const light = theme === 'light' || (theme === 'system' && matchMedia('(prefers-color-scheme: light)').matches);
+
+            document.documentElement.classList.toggle('light', light);
+            document.documentElement.classList.toggle('dark', !light);
+            document.querySelector('meta[name="theme-color"]').content = light ? '#ffffff' : '#18181b';
+        })();
+    </script>
 
     {{ $head ?? '' }}