Fix #1507 to ignore invalid theme value in localStorage

package.json

@@ -63,7 +63,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.12",
-    "react-hook-form": "7.49.3",
+    "react-hook-form": "7.50.0",
     "react-i18next": "14.0.1",
     "react-router-dom": "6.21.3",
     "sonner": "1.4.0",
@@ -79,14 +79,14 @@
     "@swc-jotai/debug-label": "0.1.0",
     "@swc-jotai/react-refresh": "0.1.0",
     "@tanstack/eslint-plugin-query": "5.18.0",
-    "@testing-library/jest-dom": "6.4.0",
+    "@testing-library/jest-dom": "6.4.1",
     "@testing-library/react": "14.2.0",
     "@testing-library/user-event": "14.5.2",
     "@total-typescript/ts-reset": "0.5.1",
     "@tsconfig/strictest": "2.0.2",
     "@tsconfig/vite-react": "3.0.0",
-    "@types/node": "20.11.14",
-    "@types/react": "18.2.48",
+    "@types/node": "20.11.15",
+    "@types/react": "18.2.51",
     "@types/react-dom": "18.2.18",
     "@typescript-eslint/eslint-plugin": "6.20.0",
     "@typescript-eslint/parser": "6.20.0",
@@ -126,7 +126,7 @@
     "terser": "5.27.0",
     "typescript": "5.3.3",
     "vite": "5.0.12",
-    "vite-plugin-checker": "0.6.3",
+    "vite-plugin-checker": "0.6.4",
     "vite-plugin-svgr": "4.2.0",
     "vite-tsconfig-paths": "4.3.1",
     "vitest": "1.2.2"

src/app/providers/Theme.tsx

@@ -1,6 +1,6 @@
 import { useEffect, type ReactNode, useMemo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useAtom } from 'jotai';
+import { atom, useAtom } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';
 
 const STORAGE_KEY = 'theme';
@@ -27,15 +27,20 @@ const setThemeAttr = (theme: string) => {
   rootEl.classList.add(theme);
 };
 
-const themePersistedAtom = atomWithStorage<Theme | typeof SYSTEM_THEME>(
+const persistedThemeAtom = atomWithStorage<Theme | typeof SYSTEM_THEME>(
   STORAGE_KEY,
   getValidTheme(localStorage.getItem(STORAGE_KEY) ?? ''),
 );
 
+const themeAtom = atom(
+  (get) => getValidTheme(get(persistedThemeAtom)),
+  (_, set, theme: string) => set(persistedThemeAtom, getValidTheme(theme)),
+);
+
 export const useTheme = () => {
   const { t } = useTranslation('global');
 
-  const [theme, setTheme] = useAtom(themePersistedAtom);
+  const [theme, setTheme] = useAtom(themeAtom);
 
   const themes = useMemo(
     () => [
@@ -51,7 +56,7 @@ export const useTheme = () => {
       ({
         theme: theme === SYSTEM_THEME ? getSystemTheme() : theme,
         rawTheme: theme,
-        setTheme: (theme: string) => setTheme(getValidTheme(theme)),
+        setTheme,
         themes,
       }) as const,
     [theme, setTheme, themes],