Fix theme preview not being reset after leaving settings

src/hooks/useSettingsState.ts

@@ -9,6 +9,7 @@ import {
 } from "react";
 
 import { SubtitleStyling } from "@/stores/subtitles";
+import { usePreviewThemeStore } from "@/stores/theme";
 
 export function useDerived<T>(
   initial: T,
@@ -56,6 +57,11 @@ export function useSettingsState(
   const [backendUrlState, setBackendUrl, resetBackendUrl, backendUrlChanged] =
     useDerived(backendUrl);
   const [themeState, setTheme, resetTheme, themeChanged] = useDerived(theme);
+  const setPreviewTheme = usePreviewThemeStore((s) => s.setPreviewTheme);
+  const resetPreviewTheme = useCallback(
+    () => setPreviewTheme(theme),
+    [setPreviewTheme, theme],
+  );
   const [
     appLanguageState,
     setAppLanguage,
@@ -81,6 +87,7 @@ export function useSettingsState(
 
   function reset() {
     resetTheme();
+    resetPreviewTheme();
     resetAppLanguage();
     resetSubStyling();
     resetProxyUrls();

src/pages/Settings.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useAsyncFn } from "react-use";
 
@@ -105,6 +105,8 @@ export function SettingsPage() {
   const setTheme = useThemeStore((s) => s.setTheme);
   const previewTheme = usePreviewThemeStore((s) => s.previewTheme) ?? "default";
   const setPreviewTheme = usePreviewThemeStore((s) => s.setPreviewTheme);
+  const activeThemeRef = useRef(activeTheme);
+  activeThemeRef.current = activeTheme;
 
   const appLanguage = useLanguageStore((s) => s.language);
   const setAppLanguage = useLanguageStore((s) => s.setLanguage);
@@ -145,6 +147,15 @@ export function SettingsPage() {
     enableThumbnails,
   );
 
+  useEffect(
+    () => () => {
+      setPreviewTheme(
+        activeThemeRef.current === "default" ? null : activeThemeRef.current,
+      );
+    },
+    [setPreviewTheme],
+  );
+
   const setThemeWithPreview = useCallback(
     (v: string | null) => {
       state.theme.set(v === "default" ? null : v);