Replace manual theme toggle with automatic system preference detection (v0.36.4)

- Remove sun/moon theme toggle button from header
- Detect system theme preference using window.matchMedia prefers-color-scheme
- Add event listener to automatically switch theme when OS preference changes
- Remove localStorage-based theme persistence in favor of system preference
- Clean up unused theme-toggle-btn CSS styles

Files modified:
- app/web/src/Header.svelte: Remove toggle button, toggleTheme function, and CSS
- app/web/src/App.svelte: Replace localStorage theme init with matchMedia detection
- pkg/version/version: Bump to v0.36.4

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app/web/src/App.svelte

@@ -818,13 +818,19 @@
         ? escapeHtml(userProfile.about).replace(/\n{2,}/g, "<br>")
         : "";
 
-    // Load theme preference from localStorage on component initialization
-    if (typeof localStorage !== "undefined") {
-        const savedTheme = localStorage.getItem("isDarkTheme");
-        if (savedTheme !== null) {
-            isDarkTheme = JSON.parse(savedTheme);
+    // Detect system theme preference and listen for changes
+    if (typeof window !== "undefined" && window.matchMedia) {
+        const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        isDarkTheme = darkModeQuery.matches;
+
+        // Listen for system theme changes
+        darkModeQuery.addEventListener("change", (e) => {
+            isDarkTheme = e.matches;
+        });
     }
 
+    // Load state from localStorage
+    if (typeof localStorage !== "undefined") {
         // Check for existing authentication
         const storedAuthMethod = localStorage.getItem("nostr_auth_method");
         const storedPubkey = localStorage.getItem("nostr_pubkey");
@@ -1717,14 +1723,6 @@
         savePersistentState();
     }
 
-    function toggleTheme() {
-        isDarkTheme = !isDarkTheme;
-        // Save theme preference to localStorage
-        if (typeof localStorage !== "undefined") {
-            localStorage.setItem("isDarkTheme", JSON.stringify(isDarkTheme));
-        }
-    }
-
     function openLoginModal() {
         if (!isLoggedIn) {
             showLoginModal = true;
@@ -2726,7 +2724,6 @@
     {currentEffectiveRole}
     {userProfile}
     {userPubkey}
-    on:toggleTheme={toggleTheme}
     on:openSettingsDrawer={openSettingsDrawer}
     on:openLoginModal={openLoginModal}
 />

app/web/src/Header.svelte

@@ -10,10 +10,6 @@
     import { createEventDispatcher } from "svelte";
     const dispatch = createEventDispatcher();
 
-    function toggleTheme() {
-        dispatch("toggleTheme");
-    }
-
     function openSettingsDrawer() {
         dispatch("openSettingsDrawer");
     }
@@ -37,9 +33,6 @@
             </span>
         </div>
         <div class="header-buttons">
-            <button class="theme-toggle-btn" on:click={toggleTheme}>
-                {isDarkTheme ? "☀️" : "🌙"}
-            </button>
             {#if isLoggedIn}
                 <button class="user-profile-btn" on:click={openSettingsDrawer}>
                     {#if userProfile?.picture}
@@ -126,7 +119,6 @@
         margin-left: auto;
     }
 
-    .theme-toggle-btn,
     .login-btn,
     .user-profile-btn {
         background: transparent;
@@ -144,7 +136,6 @@
         justify-content: center;
     }
 
-    .theme-toggle-btn:hover,
     .login-btn:hover,
     .user-profile-btn:hover {
         background: var(--card-bg);

pkg/version/version

@@ -1 +1 @@
-v0.36.3
+v0.36.4