From 3522f6c038fda8d31e6d74f22e6666b3474f7338 Mon Sep 17 00:00:00 2001
From: Marcos Rios <rioos.marcos@gmail.com>
Date: Sun, 18 Feb 2024 02:54:53 -0300
Subject: [PATCH] Fix theme preview not being reset after leaving settings

---
 src/hooks/useSettingsState.ts |  7 +++++++
 src/pages/Settings.tsx        | 13 ++++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/hooks/useSettingsState.ts b/src/hooks/useSettingsState.ts
index d0946deb..8e540a19 100644
--- a/src/hooks/useSettingsState.ts
+++ b/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();
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 5744e90f..d4ee5292 100644
--- a/src/pages/Settings.tsx
+++ b/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);