feat(site): follow OS theme preference with explicit override control

Theme now has three states (system/light/dark) persisted only when
the user explicitly picks light or dark; the default 'system' state
tracks prefers-color-scheme live via a matchMedia listener. Replaced
the single sun/moon toggle with a 3-icon segmented control so users
can return to OS-following at any time by clicking the monitor icon.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: pfeerick

tools/generate_site.py

@@ -159,22 +159,41 @@ def _safe_json(obj) -> str:
                 >
             </div>
 
-            <button
-                @click="darkMode = !darkMode; localStorage.setItem('darkMode', darkMode)"
-                class="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition"
-                :aria-label="darkMode ? 'Light mode' : 'Dark mode'"
-            >
-                <template x-if="darkMode">
-                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+            <div class="flex items-center gap-1 bg-gray-200 dark:bg-gray-700 rounded-lg p-1" role="group" aria-label="Theme">
+                <button
+                    @click="setTheme('light')"
+                    :class="theme === 'light' ? 'bg-white dark:bg-gray-900 text-red-600 shadow-sm' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'"
+                    class="p-1.5 rounded-md transition"
+                    aria-label="Light theme"
+                    :aria-pressed="theme === 'light'"
+                >
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"/>
                     </svg>
-                </template>
-                <template x-if="!darkMode">
-                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                </button>
+                <button
+                    @click="setTheme('system')"
+                    :class="theme === 'system' ? 'bg-white dark:bg-gray-900 text-red-600 shadow-sm' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'"
+                    class="p-1.5 rounded-md transition"
+                    aria-label="Use system theme"
+                    :aria-pressed="theme === 'system'"
+                >
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25"/>
+                    </svg>
+                </button>
+                <button
+                    @click="setTheme('dark')"
+                    :class="theme === 'dark' ? 'bg-white dark:bg-gray-900 text-red-600 shadow-sm' : 'text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'"
+                    class="p-1.5 rounded-md transition"
+                    aria-label="Dark theme"
+                    :aria-pressed="theme === 'dark'"
+                >
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"/>
                     </svg>
-                </template>
-            </button>
+                </button>
+            </div>
         </div>
     </header>
 
@@ -428,7 +447,21 @@ def _safe_json(obj) -> str:
                 search: '',
                 activeCategory: null,
                 activeTags: [],
-                darkMode: localStorage.getItem('darkMode') === 'true',
+                theme: localStorage.getItem('theme') || 'system',
+                osDark: window.matchMedia('(prefers-color-scheme: dark)').matches,
+
+                get darkMode() {
+                    return this.theme === 'system' ? this.osDark : this.theme === 'dark';
+                },
+
+                setTheme(t) {
+                    this.theme = t;
+                    if (t === 'system') {
+                        localStorage.removeItem('theme');
+                    } else {
+                        localStorage.setItem('theme', t);
+                    }
+                },
 
                 get filtered() {
                     return this.scripts.filter(script => {
@@ -470,6 +503,11 @@ def _safe_json(obj) -> str:
                 },
 
                 init() {
+                    // Follow OS theme changes live while no explicit choice overrides it
+                    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+                        this.osDark = e.matches;
+                    });
+
                     // Listen for filter-tag events from tag chips
                     window.addEventListener('filter-tag', (e) => {
                         this.toggleTag(e.detail.tag);