Fix auto theme mode not working on Foliate view

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);
     };

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);