From 358c8bc93168fd91b8f826fdd4cba97706e7f9ad Mon Sep 17 00:00:00 2001
From: mleku <me@mleku.dev>
Date: Wed, 17 Dec 2025 14:11:15 +0100
Subject: [PATCH] Replace manual theme toggle with automatic system preference
 detection (v0.36.4)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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    | 27 ++++++++++++---------------
 app/web/src/Header.svelte |  9 ---------
 pkg/version/version       |  2 +-
 3 files changed, 13 insertions(+), 25 deletions(-)

diff --git a/app/web/src/App.svelte b/app/web/src/App.svelte
index 768fda0..b07849d 100644
--- a/app/web/src/App.svelte
+++ b/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}
 />
diff --git a/app/web/src/Header.svelte b/app/web/src/Header.svelte
index fd07fe0..3add844 100644
--- a/app/web/src/Header.svelte
+++ b/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);
diff --git a/pkg/version/version b/pkg/version/version
index 6b8706c..a34a479 100644
--- a/pkg/version/version
+++ b/pkg/version/version
@@ -1 +1 @@
-v0.36.3
+v0.36.4