fixes

frontend/src/app/AppLayout.jsx

@@ -28,6 +28,7 @@ const DEFAULT_FOLDER_NAME = 'All Documents';
 const ROW_KEY_SEPARATOR = ':';
 const DOCUMENT_ROW_PREFIX = 'document';
 const FOLDER_ROW_PREFIX = 'folder';
+const THEME_STORAGE_KEY = 'papercrate_theme_settings';
 
 const resolveApiPath = (path = '') => path;
 
@@ -197,22 +198,66 @@ const AppLayout = () => {
     const stored = window.localStorage.getItem('papercrate_view_mode');
     return stored === 'grid' ? 'grid' : 'list';
   });
-  const [neutralHue, setNeutralHue] = useState(() => {
+
+  const loadThemeSettings = () => {
+    const defaults = { neutralHue: 260, mode: 'system' };
     if (typeof window === 'undefined') {
-      return 260;
+      if (typeof document !== 'undefined') {
+        const current = document.documentElement.style.getPropertyValue('--neutral-hue');
+        const parsed = Number.parseInt(current, 10);
+        return {
+          neutralHue: Number.isNaN(parsed) ? defaults.neutralHue : parsed,
+          mode: defaults.mode,
+        };
+      }
+      return defaults;
     }
-    const stored = window.localStorage.getItem('papercrate_neutral_hue');
-    if (stored) {
-      const parsedStored = Number.parseInt(stored, 10);
-      if (!Number.isNaN(parsedStored)) {
-        return parsedStored;
+
+    const root = document.documentElement;
+    const loadFromRoot = () => {
+      const current = root.style.getPropertyValue('--neutral-hue');
+      const parsed = Number.parseInt(current, 10);
+      return Number.isNaN(parsed) ? defaults.neutralHue : parsed;
+    };
+
+    let neutralHueValue = loadFromRoot();
+    let modeValue = defaults.mode;
+
+    const composite = window.localStorage.getItem(THEME_STORAGE_KEY);
+    if (composite) {
+      try {
+        const parsed = JSON.parse(composite);
+        const storedHue = Number.parseInt(parsed?.neutralHue, 10);
+        if (!Number.isNaN(storedHue)) {
+          neutralHueValue = storedHue;
+        }
+        const storedMode = parsed?.mode;
+        if (storedMode === 'light' || storedMode === 'dark' || storedMode === 'system') {
+          modeValue = storedMode;
+        }
+      } catch (error) {
+        console.warn('[theme] failed to parse stored theme settings', error);
+      }
+    } else {
+      const legacyHue = window.localStorage.getItem('papercrate_neutral_hue');
+      if (legacyHue) {
+        const parsedLegacyHue = Number.parseInt(legacyHue, 10);
+        if (!Number.isNaN(parsedLegacyHue)) {
+          neutralHueValue = parsedLegacyHue;
+        }
+      }
+      const legacyMode = window.localStorage.getItem('papercrate_theme_mode');
+      if (legacyMode === 'light' || legacyMode === 'dark' || legacyMode === 'system') {
+        modeValue = legacyMode;
       }
     }
-    const root = document.documentElement;
-    const current = root.style.getPropertyValue('--neutral-hue');
-    const parsed = Number.parseInt(current, 10);
-    return Number.isNaN(parsed) ? 260 : parsed;
-  });
+
+    return { neutralHue: neutralHueValue, mode: modeValue };
+  };
+
+  const initialThemeSettings = loadThemeSettings();
+  const [neutralHue, setNeutralHue] = useState(initialThemeSettings.neutralHue);
+  const [themeMode, setThemeMode] = useState(initialThemeSettings.mode);
   const initialRowSelection = [];
   const [selectedRowKeys, setSelectedRowKeys] = useState(initialRowSelection);
   const [selectionOrder, setSelectionOrder] = useState(initialRowSelection);
@@ -314,11 +359,33 @@ const AppLayout = () => {
     if (typeof document !== 'undefined') {
       document.documentElement.style.setProperty('--neutral-hue', `${neutralHue}deg`);
     }
-    if (typeof window !== 'undefined') {
-      window.localStorage.setItem('papercrate_neutral_hue', String(neutralHue));
-    }
   }, [neutralHue]);
 
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      const root = document.documentElement;
+      if (themeMode === 'system') {
+        root.removeAttribute('data-theme');
+      } else {
+        root.setAttribute('data-theme', themeMode);
+      }
+    }
+  }, [themeMode]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    try {
+      const payload = JSON.stringify({ neutralHue, mode: themeMode });
+      window.localStorage.setItem(THEME_STORAGE_KEY, payload);
+      window.localStorage.removeItem('papercrate_neutral_hue');
+      window.localStorage.removeItem('papercrate_theme_mode');
+    } catch (error) {
+      console.warn('[theme] failed to persist theme settings', error);
+    }
+  }, [neutralHue, themeMode]);
+
   const handleNeutralHueChange = useCallback((value) => {
     if (value === '') {
       setNeutralHue(260);
@@ -331,6 +398,13 @@ const AppLayout = () => {
     setNeutralHue(parsed);
   }, []);
 
+  const handleThemeModeChange = useCallback((mode) => {
+    if (mode !== 'light' && mode !== 'dark' && mode !== 'system') {
+      return;
+    }
+    setThemeMode(mode);
+  }, []);
+
   const clearFilters = useCallback(() => {
     setSearchQuery('');
     setActiveTagFilters([]);
@@ -4764,6 +4838,8 @@ const AppLayout = () => {
       creatingFolder,
       onNeutralHueChange: handleNeutralHueChange,
       neutralHue,
+      themeMode,
+      onThemeModeChange: handleThemeModeChange,
       tags,
       activeTagIds: activeTagFilters,
       onToggleTagFilter: toggleTagFilter,
@@ -4824,6 +4900,8 @@ const AppLayout = () => {
       creatingFolder,
       handleNeutralHueChange,
       neutralHue,
+      themeMode,
+      handleThemeModeChange,
     ],
   );