From d6fe3ec181ba326da4169e623810765f62aa3b35 Mon Sep 17 00:00:00 2001
From: Chenyu <10610892+BinaryFiddler@users.noreply.github.com>
Date: Tue, 16 Jun 2026 13:10:31 -0700
Subject: [PATCH] [osprey-ui] darkmode follows system preferences (#360)

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 osprey_ui/public/index.html         |  9 ++--
 osprey_ui/src/stores/ThemeStore.tsx | 73 +++++++++++++++++------------
 osprey_ui/src/uikit/ThemeToggle.tsx | 31 ++++++------
 3 files changed, 65 insertions(+), 48 deletions(-)

diff --git a/osprey_ui/public/index.html b/osprey_ui/public/index.html
index d43cc76..f3f827c 100644
--- a/osprey_ui/public/index.html
+++ b/osprey_ui/public/index.html
@@ -20,13 +20,14 @@
     <title>Osprey</title>
     <script>
       // Apply theme before paint so dark-mode users don't see a flash of light
-      // mode. Mirrors getInitialMode() in stores/ThemeStore.tsx — keep in sync.
+      // mode. Mirrors getInitialPreference() in stores/ThemeStore.tsx — keep in
+      // sync.
       (function () {
         try {
-          var stored = window.localStorage.getItem('osprey-ui-dark-theme');
+          var pref = window.localStorage.getItem('osprey-ui-theme-preference');
           var isDark =
-            stored === 'true' ||
-            (stored === null &&
+            pref === 'dark' ||
+            (pref !== 'light' &&
               window.matchMedia &&
               window.matchMedia('(prefers-color-scheme: dark)').matches);
           if (isDark) document.documentElement.classList.add('dark-theme');
diff --git a/osprey_ui/src/stores/ThemeStore.tsx b/osprey_ui/src/stores/ThemeStore.tsx
index c56ceac..4d7f381 100644
--- a/osprey_ui/src/stores/ThemeStore.tsx
+++ b/osprey_ui/src/stores/ThemeStore.tsx
@@ -1,44 +1,59 @@
 import create from 'zustand';
 
 export type ThemeMode = 'light' | 'dark';
+export type ThemePreference = 'system' | 'light' | 'dark';
 
-const STORAGE_KEY = 'osprey-ui-dark-theme';
+const STORAGE_KEY = 'osprey-ui-theme-preference';
 
-const getInitialMode = (): ThemeMode => {
-  if (typeof window === 'undefined') return 'light';
+const getSystemMode = (): ThemeMode => {
+  if (typeof window === 'undefined' || !window.matchMedia) return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};
+
+const getInitialPreference = (): ThemePreference => {
+  if (typeof window === 'undefined') return 'system';
   const stored = window.localStorage.getItem(STORAGE_KEY);
-  if (stored === 'true') return 'dark';
-  if (stored === 'false') return 'light';
-  // No localStorage value: honor the OS preference.
-  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    return 'dark';
-  }
-  return 'light';
+  if (stored === 'light' || stored === 'dark') return stored;
+  return 'system';
 };
 
+const resolveMode = (pref: ThemePreference): ThemeMode => (pref === 'system' ? getSystemMode() : pref);
+
 type ThemeStore = {
+  preference: ThemePreference;
   mode: ThemeMode;
-  setMode: (mode: ThemeMode) => void;
-  toggleMode: () => void;
+  setPreference: (preference: ThemePreference) => void;
 };
 
-const persist = (mode: ThemeMode) => {
-  window.localStorage.setItem(STORAGE_KEY, String(mode === 'dark'));
-};
+const useThemeStore = create<ThemeStore>((set) => {
+  const preference = getInitialPreference();
+  return {
+    preference,
+    mode: resolveMode(preference),
+    setPreference: (next) => {
+      if (next === 'system') {
+        window.localStorage.removeItem(STORAGE_KEY);
+      } else {
+        window.localStorage.setItem(STORAGE_KEY, next);
+      }
+      set({ preference: next, mode: resolveMode(next) });
+    },
+  };
+});
 
-const useThemeStore = create<ThemeStore>((set) => ({
-  mode: getInitialMode(),
-  setMode: (mode) => {
-    persist(mode);
-    set({ mode });
-  },
-  toggleMode: () => {
-    return set((state) => {
-      const next: ThemeMode = state.mode === 'dark' ? 'light' : 'dark';
-      persist(next);
-      return { mode: next };
-    });
-  },
-}));
+if (typeof window !== 'undefined' && window.matchMedia) {
+  const mql = window.matchMedia('(prefers-color-scheme: dark)');
+  const handleChange = () => {
+    if (useThemeStore.getState().preference === 'system') {
+      useThemeStore.setState({ mode: getSystemMode() });
+    }
+  };
+  if (mql.addEventListener) {
+    mql.addEventListener('change', handleChange);
+  } else if (mql.addListener) {
+    // Safari < 14 fallback.
+    mql.addListener(handleChange);
+  }
+}
 
 export default useThemeStore;
diff --git a/osprey_ui/src/uikit/ThemeToggle.tsx b/osprey_ui/src/uikit/ThemeToggle.tsx
index 8956059..22e7f4f 100644
--- a/osprey_ui/src/uikit/ThemeToggle.tsx
+++ b/osprey_ui/src/uikit/ThemeToggle.tsx
@@ -1,23 +1,24 @@
-import { Switch } from 'antd';
-import { MoonOutlined, SunOutlined } from '@ant-design/icons';
+import { Segmented } from 'antd';
+import { DesktopOutlined, MoonOutlined, SunOutlined } from '@ant-design/icons';
 
-import useThemeStore from '../stores/ThemeStore';
+import useThemeStore, { ThemePreference } from '../stores/ThemeStore';
+
+const OPTIONS = [
+  { value: 'light' as const, icon: <SunOutlined />, title: 'Light theme' },
+  { value: 'system' as const, icon: <DesktopOutlined />, title: 'Use system theme' },
+  { value: 'dark' as const, icon: <MoonOutlined />, title: 'Dark theme' },
+];
 
 const ThemeToggle = () => {
-  const mode = useThemeStore((state) => {
-    return state.mode;
-  });
-  const toggleMode = useThemeStore((state) => {
-    return state.toggleMode;
-  });
+  const preference = useThemeStore((state) => state.preference);
+  const setPreference = useThemeStore((state) => state.setPreference);
 
   return (
-    <Switch
-      checked={mode === 'dark'}
-      onChange={toggleMode}
-      checkedChildren={<MoonOutlined />}
-      unCheckedChildren={<SunOutlined />}
-      aria-label={mode === 'dark' ? 'Switch to light theme' : 'Switch to dark theme'}
+    <Segmented
+      value={preference}
+      onChange={(value) => setPreference(value as ThemePreference)}
+      options={OPTIONS}
+      aria-label="Theme"
     />
   );
 };
-- 
2.54.0