Fix theme preview

src/pages/Settings.tsx

@@ -102,9 +102,9 @@ export function AccountSettings(props: {
 
 export function SettingsPage() {
   const { t } = useTranslation();
-  const activeTheme = useThemeStore((s) => s.theme) ?? "default";
+  const activeTheme = useThemeStore((s) => s.theme);
   const setTheme = useThemeStore((s) => s.setTheme);
-  const previewTheme = usePreviewThemeStore((s) => s.previewTheme) ?? "default";
+  const previewTheme = usePreviewThemeStore((s) => s.previewTheme);
   const setPreviewTheme = usePreviewThemeStore((s) => s.setPreviewTheme);
 
   const appLanguage = useLanguageStore((s) => s.language);
@@ -146,18 +146,21 @@ export function SettingsPage() {
     enableThumbnails,
   );
 
-  // Reset the preview theme when the settings page is unmounted
-  useEffect(
-    () => () => {
+  useEffect(() => {
+    setPreviewTheme(activeTheme ?? "default");
+  }, [setPreviewTheme, activeTheme]);
+
+  useEffect(() => {
+    // Clear preview theme on unmount
+    return () => {
       setPreviewTheme(null);
-    },
-    [setPreviewTheme],
-  );
+    };
+  }, [setPreviewTheme]);
 
   const setThemeWithPreview = useCallback(
-    (v: string | null) => {
-      state.theme.set(v === "default" ? null : v);
-      setPreviewTheme(v);
+    (theme: string) => {
+      state.theme.set(theme === "default" ? null : theme);
+      setPreviewTheme(theme);
     },
     [state.theme, setPreviewTheme],
   );
@@ -261,8 +264,8 @@ export function SettingsPage() {
         </div>
         <div id="settings-appearance" className="mt-48">
           <ThemePart
-            active={previewTheme}
-            inUse={activeTheme}
+            active={previewTheme ?? "default"}
+            inUse={activeTheme ?? "default"}
             setTheme={setThemeWithPreview}
           />
         </div>

src/pages/parts/settings/ThemePart.tsx

@@ -7,22 +7,27 @@ import { Heading1 } from "@/components/utils/Text";
 const availableThemes = [
   {
     id: "default",
+    selector: "theme-default",
     key: "settings.appearance.themes.default",
   },
   {
     id: "blue",
+    selector: "theme-blue",
     key: "settings.appearance.themes.blue",
   },
   {
     id: "teal",
+    selector: "theme-teal",
     key: "settings.appearance.themes.teal",
   },
   {
     id: "red",
+    selector: "theme-red",
     key: "settings.appearance.themes.red",
   },
   {
     id: "gray",
+    selector: "theme-gray",
     key: "settings.appearance.themes.gray",
   },
 ];
@@ -121,9 +126,9 @@ function ThemePreview(props: {
 }
 
 export function ThemePart(props: {
-  active: string | null;
-  inUse: string | null;
-  setTheme: (theme: string | null) => void;
+  active: string;
+  inUse: string;
+  setTheme: (theme: string) => void;
 }) {
   const { t } = useTranslation();
 
@@ -131,10 +136,9 @@ export function ThemePart(props: {
     <div>
       <Heading1 border>{t("settings.appearance.title")}</Heading1>
       <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-6 max-w-[700px]">
-        {/* default theme */}
         {availableThemes.map((v) => (
           <ThemePreview
-            selector={`theme-${v.id}`}
+            selector={v.selector}
             active={props.active === v.id}
             inUse={props.inUse === v.id}
             name={t(v.key)}