From 7c9ed815add42ccf4c085a8e461bc35daf464b81 Mon Sep 17 00:00:00 2001
From: chrox <chrox.huang@gmail.com>
Date: Wed, 20 Nov 2024 18:14:52 +0100
Subject: [PATCH] Fix auto theme mode not working on Foliate view

---
 .../src/app/reader/components/FoliateViewer.tsx        | 10 +++++++++-
 apps/readest-app/src/hooks/useTheme.ts                 |  3 ++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
index ad92caf4..9c13eb11 100644
--- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
+++ b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
@@ -107,6 +107,13 @@ const FoliateViewer: React.FC<{
     onRelocate: progressRelocateHandler,
   });
 
+  useEffect(() => {
+    if (viewRef.current) {
+      const viewSettings = getViewSettings(bookKey)!;
+      viewRef.current.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+    }
+  }, [themeCode]);
+
   useEffect(() => {
     if (isViewCreated.current) return;
     const openBook = async () => {
@@ -120,6 +127,8 @@ const FoliateViewer: React.FC<{
 
       await view.open(bookDoc);
       const viewSettings = getViewSettings(bookKey)!;
+      view.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+
       const isScrolled = viewSettings.scrolled!;
       const marginPx = viewSettings.marginPx!;
       const gapPercent = viewSettings.gapPercent!;
@@ -147,7 +156,6 @@ const FoliateViewer: React.FC<{
         await view.goToFraction(0);
       }
       setViewInited(true);
-      view.renderer.setStyles?.(getStyles(viewSettings, themeCode));
 
       window.addEventListener('message', handleClickTurnPage);
     };
diff --git a/apps/readest-app/src/hooks/useTheme.ts b/apps/readest-app/src/hooks/useTheme.ts
index dbb73411..50ac7c6f 100644
--- a/apps/readest-app/src/hooks/useTheme.ts
+++ b/apps/readest-app/src/hooks/useTheme.ts
@@ -73,6 +73,7 @@ export const useTheme = () => {
       localStorage.setItem('themeMode', themeMode);
       localStorage.setItem('themeColor', themeColor);
     }
+    const isDarkMode = themeMode === 'dark' || (themeMode === 'auto' && systemIsDarkMode);
     const theme = themes.find((t) => t.name === themeColor);
     const palette = isDarkMode ? theme!.colors.dark : theme!.colors.light;
     setThemeCode({
@@ -80,7 +81,7 @@ export const useTheme = () => {
       fg: palette['base-content'],
       primary: palette.primary,
     });
-  }, [themeMode, themeColor]);
+  }, [themeMode, themeColor, isDarkMode]);
 
   const updateThemeMode = (mode: ThemeMode) => setThemeMode(mode);
   const updateThemeColor = (color: string) => setThemeColor(color);