theme

frontend/src/sidebar/SidebarContext.tsx

@@ -37,6 +37,7 @@ const DEFAULT_NEUTRAL_CHROMA = 0.44;
 const DEFAULT_NEUTRAL_CONTRAST = 0.56;
 const DEFAULT_THEME_MODE = 'system';
 const THEME_MODES = ['system', 'light', 'dark'];
+const DARK_MODE_MEDIA_QUERY = '(prefers-color-scheme: dark)';
 
 const loadInitialThemeSettings = () => {
   const defaults = {
@@ -144,6 +145,12 @@ export const SidebarProvider = ({ initialCollapsed = false, children }) => {
   const [neutralChroma, setNeutralChromaState] = useState(initialTheme.neutralChroma);
   const [neutralContrast, setNeutralContrastState] = useState(initialTheme.neutralContrast);
   const [themeMode, setThemeModeState] = useState(initialTheme.mode);
+  const [systemPrefersDark, setSystemPrefersDark] = useState(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return false;
+    }
+    return window.matchMedia(DARK_MODE_MEDIA_QUERY).matches;
+  });
 
   useEffect(() => {
     document.documentElement.style.setProperty('--neutral-hue', `${neutralHue}deg`);
@@ -157,14 +164,34 @@ export const SidebarProvider = ({ initialCollapsed = false, children }) => {
     document.documentElement.style.setProperty('--neutral-contrast', String(neutralContrast));
   }, [neutralContrast]);
 
+  useEffect(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return () => undefined;
+    }
+    const mediaQuery = window.matchMedia(DARK_MODE_MEDIA_QUERY);
+    const handler = (event: MediaQueryListEvent) => {
+      setSystemPrefersDark(event.matches);
+    };
+    if (typeof mediaQuery.addEventListener === 'function') {
+      mediaQuery.addEventListener('change', handler);
+      return () => mediaQuery.removeEventListener('change', handler);
+    }
+    mediaQuery.addListener(handler);
+    return () => mediaQuery.removeListener(handler);
+  }, []);
+
   useEffect(() => {
     const root = document.documentElement;
     if (themeMode === 'system') {
-      root.removeAttribute('data-theme');
-    } else {
-      root.setAttribute('data-theme', themeMode);
+      if (systemPrefersDark) {
+        root.setAttribute('data-theme', 'dark');
+      } else {
+        root.removeAttribute('data-theme');
+      }
+      return;
     }
-  }, [themeMode]);
+    root.setAttribute('data-theme', themeMode);
+  }, [themeMode, systemPrefersDark]);
 
   useEffect(() => {
     try {