From f2cf94c7c0a4a90f0d9588fe42fe567bf21c93ab Mon Sep 17 00:00:00 2001
From: Devanshukoli <kolidevanshu02@gmail.com>
Date: Wed, 26 Aug 2026 18:22:51 +0530
Subject: [PATCH 1/2] fix: persist appearance theme only after save

Theme picks now preview in place and revert when leaving Appearance or Settings, so unsaved choices no longer stick across tabs. Save Changes is what commits the theme.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/SettingsView.tsx |  33 ++++++++---
 src/lib/theme.test.ts           | 101 ++++++++++++++++++++++++++++++++
 src/lib/theme.ts                |  24 ++++++--
 3 files changed, 145 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/theme.test.ts

diff --git a/src/components/SettingsView.tsx b/src/components/SettingsView.tsx
index ef9c62a..2c2632d 100644
--- a/src/components/SettingsView.tsx
+++ b/src/components/SettingsView.tsx
@@ -24,7 +24,7 @@ import {
 } from 'lucide-react';
 import { UserProfile } from '../types';
 import { fetchWithAuth } from '../lib/auth';
-import { applyTheme, getStoredTheme } from '../lib/theme';
+import { applyTheme, getStoredTheme, previewTheme, revertThemePreview, ThemeMode } from '../lib/theme';
 import { logoutUser } from '../lib/auth';
 
 interface SettingsViewProps {
@@ -52,7 +52,7 @@ export default function SettingsView({ user, onUpdateUser }: SettingsViewProps)
   const [email, setEmail] = useState(user?.email);
 
   // Appearance
-  const [appearance, setAppearance] = useState<'light' | 'dark' | 'system'>(() => user?.appearance || getStoredTheme());
+  const [appearance, setAppearance] = useState<ThemeMode>(() => user?.appearance || getStoredTheme());
 
   // Security & 2FA State
   const [currentPassword, setCurrentPassword] = useState('');
@@ -246,8 +246,8 @@ export default function SettingsView({ user, onUpdateUser }: SettingsViewProps)
     if (user) {
       setName(user.name || '');
       setEmail(user.email || '');
-      setAppearance(user.appearance || 'system');
-      applyTheme(user.appearance || 'system');
+      setAppearance(user.appearance || getStoredTheme());
+      applyTheme(user.appearance || getStoredTheme());
       setTwoFactorEnabled(user.twoFactorEnabled || false);
       setGeminiKey(user.apiKeys?.gemini || '');
       setOpenaiKey(user.apiKeys?.openai || '');
@@ -260,10 +260,16 @@ export default function SettingsView({ user, onUpdateUser }: SettingsViewProps)
       setAllowTelemetry(user.privacy?.allowTelemetry ?? true);
       setSearchHistoryCleared(user.privacy?.searchHistoryCleared ?? false);
     } else {
-      applyTheme(getStoredTheme());
+      revertThemePreview();
     }
   }, [user]);
 
+  useEffect(() => {
+    return () => {
+      revertThemePreview();
+    };
+  }, []);
+
   const handleExportData = async () => {
     setIsExporting(true);
     setExportSuccess(null);
@@ -356,9 +362,19 @@ export default function SettingsView({ user, onUpdateUser }: SettingsViewProps)
     }
   };
 
-  const handleAppearanceChange = (mode: 'light' | 'dark' | 'system') => {
+  const committedAppearance: ThemeMode = user?.appearance || getStoredTheme();
+
+  const handleSettingsTabChange = (id: typeof activeTab) => {
+    if (activeTab === 'appearance' && id !== 'appearance') {
+      setAppearance(committedAppearance);
+      previewTheme(committedAppearance);
+    }
+    setActiveTab(id);
+  };
+
+  const handleAppearanceChange = (mode: ThemeMode) => {
     setAppearance(mode);
-    applyTheme(mode);
+    previewTheme(mode);
   };
 
   const handleChangePassword = async (e: React.FormEvent) => {
@@ -543,6 +559,7 @@ export default function SettingsView({ user, onUpdateUser }: SettingsViewProps)
         }
       });
 
+      applyTheme(appearance);
       setSavedSuccess(true);
       setTimeout(() => setSavedSuccess(false), 3000);
     } catch (err: any) {
@@ -598,7 +615,7 @@ export default function SettingsView({ user, onUpdateUser }: SettingsViewProps)
             return (
               <button
                 key={item.id}
-                onClick={() => setActiveTab(item.id as any)}
+                onClick={() => handleSettingsTabChange(item.id as typeof activeTab)}
                 className={`w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-xs font-medium transition-all cursor-pointer text-left ${
                   isActive
                     ? 'bg-zinc-200 dark:bg-zinc-800 text-zinc-900 dark:text-white font-semibold'
diff --git a/src/lib/theme.test.ts b/src/lib/theme.test.ts
new file mode 100644
index 0000000..ef2f4a6
--- /dev/null
+++ b/src/lib/theme.test.ts
@@ -0,0 +1,101 @@
+import { describe, it, beforeEach } from 'node:test';
+import assert from 'node:assert/strict';
+
+function installThemeTestDom(options?: { prefersDark?: boolean }) {
+  const store: Record<string, string> = {};
+  const classes = new Set<string>();
+  const prefersDark = options?.prefersDark ?? false;
+
+  const localStorageMock = {
+    getItem: (key: string) => store[key] ?? null,
+    setItem: (key: string, value: string) => {
+      store[key] = value;
+    },
+    removeItem: (key: string) => {
+      delete store[key];
+    },
+    clear: () => {
+      Object.keys(store).forEach((key) => delete store[key]);
+    },
+  };
+
+  const classList = {
+    add: (cls: string) => {
+      classes.add(cls);
+    },
+    remove: (cls: string) => {
+      classes.delete(cls);
+    },
+    contains: (cls: string) => classes.has(cls),
+  };
+
+  (globalThis as any).localStorage = localStorageMock;
+  (globalThis as any).document = {
+    documentElement: { classList },
+  };
+  (globalThis as any).window = {
+    matchMedia: (query: string) => ({
+      matches: query.includes('prefers-color-scheme: dark') ? prefersDark : false,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    }),
+  };
+
+  return { store, classes };
+}
+
+describe('theme preview vs persist', () => {
+  beforeEach(() => {
+    installThemeTestDom();
+  });
+
+  it('previewTheme applies dark class without writing localStorage', async () => {
+    const { store, classes } = installThemeTestDom();
+    const { previewTheme, getStoredTheme } = await import('./theme.ts');
+
+    previewTheme('dark');
+
+    assert.equal(classes.has('dark'), true);
+    assert.equal(store.theme, undefined);
+    assert.equal(getStoredTheme(), 'light');
+  });
+
+  it('applyTheme persists the mode and applies it', async () => {
+    const { store, classes } = installThemeTestDom();
+    const { applyTheme, getStoredTheme } = await import('./theme.ts');
+
+    applyTheme('dark');
+
+    assert.equal(store.theme, 'dark');
+    assert.equal(getStoredTheme(), 'dark');
+    assert.equal(classes.has('dark'), true);
+  });
+
+  it('revertThemePreview restores the last saved theme after an unsaved preview', async () => {
+    const { store, classes } = installThemeTestDom();
+    const { applyTheme, previewTheme, revertThemePreview, getStoredTheme } = await import('./theme.ts');
+
+    applyTheme('light');
+    previewTheme('dark');
+    assert.equal(classes.has('dark'), true);
+    assert.equal(getStoredTheme(), 'light');
+
+    revertThemePreview();
+
+    assert.equal(store.theme, 'light');
+    assert.equal(classes.has('dark'), false);
+    assert.equal(getStoredTheme(), 'light');
+  });
+
+  it('previewing system theme does not commit until applyTheme', async () => {
+    const { store, classes } = installThemeTestDom({ prefersDark: true });
+    const { applyTheme, previewTheme, getStoredTheme } = await import('./theme.ts');
+
+    applyTheme('light');
+    previewTheme('system');
+
+    assert.equal(classes.has('dark'), true);
+    assert.equal(store.theme, 'light');
+    assert.equal(getStoredTheme(), 'light');
+  });
+});
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
index d53f4de..a40a0eb 100644
--- a/src/lib/theme.ts
+++ b/src/lib/theme.ts
@@ -8,19 +8,33 @@ export function getStoredTheme(): ThemeMode {
   return 'light'; // Default to light mode as requested
 }
 
-export function applyTheme(mode: ThemeMode) {
-  localStorage.setItem('theme', mode);
-  const isDark =
+function isDarkMode(mode: ThemeMode): boolean {
+  return (
     mode === 'dark' ||
-    (mode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    (mode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+  );
+}
 
-  if (isDark) {
+/** Apply a theme to the document without persisting it. */
+export function previewTheme(mode: ThemeMode) {
+  if (isDarkMode(mode)) {
     document.documentElement.classList.add('dark');
   } else {
     document.documentElement.classList.remove('dark');
   }
 }
 
+/** Persist the theme and apply it. */
+export function applyTheme(mode: ThemeMode) {
+  localStorage.setItem('theme', mode);
+  previewTheme(mode);
+}
+
+/** Restore the last saved theme (localStorage / default). */
+export function revertThemePreview() {
+  previewTheme(getStoredTheme());
+}
+
 export function initTheme() {
   const current = getStoredTheme();
   applyTheme(current);

From e324197e018f63be07ee8d5406979f895035b6f8 Mon Sep 17 00:00:00 2001
From: Devanshukoli <kolidevanshu02@gmail.com>
Date: Wed, 26 Aug 2026 20:55:31 +0530
Subject: [PATCH 2/2] fix: follow OS color scheme from active theme preview

The matchMedia listener now uses in-memory preview mode instead of localStorage, so unsaved system previews track OS changes and other previews do not.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/lib/theme.test.ts | 58 +++++++++++++++++++++++++++++++++++++------
 src/lib/theme.ts      | 16 ++++++------
 2 files changed, 58 insertions(+), 16 deletions(-)

diff --git a/src/lib/theme.test.ts b/src/lib/theme.test.ts
index ef2f4a6..dab35e7 100644
--- a/src/lib/theme.test.ts
+++ b/src/lib/theme.test.ts
@@ -5,6 +5,21 @@ function installThemeTestDom(options?: { prefersDark?: boolean }) {
   const store: Record<string, string> = {};
   const classes = new Set<string>();
   const prefersDark = options?.prefersDark ?? false;
+  const changeListeners: Array<(event: { matches: boolean }) => void> = [];
+
+  const mediaQuery = {
+    matches: prefersDark,
+    addEventListener: (_event: string, handler: (event: { matches: boolean }) => void) => {
+      changeListeners.push(handler);
+    },
+    removeEventListener: () => {},
+    dispatch(matches: boolean) {
+      mediaQuery.matches = matches;
+      for (const handler of changeListeners) {
+        handler({ matches });
+      }
+    },
+  };
 
   const localStorageMock = {
     getItem: (key: string) => store[key] ?? null,
@@ -34,14 +49,13 @@ function installThemeTestDom(options?: { prefersDark?: boolean }) {
     documentElement: { classList },
   };
   (globalThis as any).window = {
-    matchMedia: (query: string) => ({
-      matches: query.includes('prefers-color-scheme: dark') ? prefersDark : false,
-      addEventListener: () => {},
-      removeEventListener: () => {},
-    }),
+    matchMedia: (query: string) =>
+      query.includes('prefers-color-scheme: dark')
+        ? mediaQuery
+        : { matches: false, addEventListener: () => {}, removeEventListener: () => {} },
   };
 
-  return { store, classes };
+  return { store, classes, mediaQuery };
 }
 
 describe('theme preview vs persist', () => {
@@ -88,14 +102,42 @@ describe('theme preview vs persist', () => {
   });
 
   it('previewing system theme does not commit until applyTheme', async () => {
-    const { store, classes } = installThemeTestDom({ prefersDark: true });
-    const { applyTheme, previewTheme, getStoredTheme } = await import('./theme.ts');
+    const { store, classes, mediaQuery } = installThemeTestDom({ prefersDark: true });
+    const { applyTheme, previewTheme, initTheme, getStoredTheme } = await import('./theme.ts');
 
+    initTheme();
     applyTheme('light');
     previewTheme('system');
 
     assert.equal(classes.has('dark'), true);
     assert.equal(store.theme, 'light');
     assert.equal(getStoredTheme(), 'light');
+
+    mediaQuery.dispatch(false);
+    assert.equal(classes.has('dark'), false, 'unsaved system preview should follow OS light');
+    assert.equal(store.theme, 'light');
+
+    mediaQuery.dispatch(true);
+    assert.equal(classes.has('dark'), true, 'unsaved system preview should follow OS dark');
+    assert.equal(store.theme, 'light');
+  });
+
+  it('OS color-scheme changes ignore the listener when the active preview is not system', async () => {
+    const { store, classes, mediaQuery } = installThemeTestDom({ prefersDark: false });
+    const { applyTheme, previewTheme, initTheme, revertThemePreview } = await import('./theme.ts');
+
+    initTheme();
+    applyTheme('system');
+    previewTheme('dark');
+
+    mediaQuery.dispatch(false);
+    assert.equal(classes.has('dark'), true, 'unsaved dark preview should ignore OS going light');
+    assert.equal(store.theme, 'system');
+
+    revertThemePreview();
+    assert.equal(classes.has('dark'), false);
+
+    mediaQuery.dispatch(true);
+    assert.equal(classes.has('dark'), true, 'reverted system theme should follow OS again');
   });
 });
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
index a40a0eb..755c705 100644
--- a/src/lib/theme.ts
+++ b/src/lib/theme.ts
@@ -1,5 +1,8 @@
 export type ThemeMode = 'light' | 'dark' | 'system';
 
+/** Currently applied theme, including unsaved previews. */
+let activeThemeMode: ThemeMode = 'light';
+
 export function getStoredTheme(): ThemeMode {
   const stored = localStorage.getItem('theme');
   if (stored === 'light' || stored === 'dark' || stored === 'system') {
@@ -17,6 +20,7 @@ function isDarkMode(mode: ThemeMode): boolean {
 
 /** Apply a theme to the document without persisting it. */
 export function previewTheme(mode: ThemeMode) {
+  activeThemeMode = mode;
   if (isDarkMode(mode)) {
     document.documentElement.classList.add('dark');
   } else {
@@ -39,14 +43,10 @@ export function initTheme() {
   const current = getStoredTheme();
   applyTheme(current);
 
-  // Listen for system theme changes if set to 'system'
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-    if (getStoredTheme() === 'system') {
-      if (e.matches) {
-        document.documentElement.classList.add('dark');
-      } else {
-        document.documentElement.classList.remove('dark');
-      }
+  // Follow OS changes only while the active (possibly previewed) mode is system.
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    if (activeThemeMode === 'system') {
+      previewTheme('system');
     }
   });
 }