fix: handle system theme change and set color scheme, closes #571 (#607)

apps/readest-app/src/app/reader/components/FoliateViewer.tsx

@@ -36,7 +36,7 @@ const FoliateViewer: React.FC<{
   const { getView, setView: setFoliateView, setProgress } = useReaderStore();
   const { getViewSettings, setViewSettings } = useReaderStore();
   const { getParallels } = useParallelViewStore();
-  const { themeCode } = useThemeStore();
+  const { themeCode, isDarkMode } = useThemeStore();
   const viewSettings = getViewSettings(bookKey)!;
 
   const [toastMessage, setToastMessage] = useState('');
@@ -129,7 +129,7 @@ const FoliateViewer: React.FC<{
       viewRef.current.renderer.setStyles?.(getStyles(viewSettings));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [themeCode]);
+  }, [themeCode, isDarkMode]);
 
   useEffect(() => {
     if (isViewCreated.current) return;

apps/readest-app/src/hooks/useTheme.ts

@@ -14,9 +14,8 @@ export const useTheme = () => {
   }, [settings]);
 
   useEffect(() => {
-    document.documentElement.setAttribute(
-      'data-theme',
-      `${themeColor}-${isDarkMode ? 'dark' : 'light'}`,
-    );
+    const colorScheme = isDarkMode ? 'dark' : 'light';
+    document.documentElement.style.setProperty('color-scheme', colorScheme);
+    document.documentElement.setAttribute('data-theme', `${themeColor}-${colorScheme}`);
   }, [themeColor, isDarkMode]);
 };

apps/readest-app/src/store/themeStore.ts

@@ -47,7 +47,9 @@ export const useThemeStore = create<ThemeState>((set, get) => {
   if (typeof window !== 'undefined') {
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
     const handleSystemThemeChange = () => {
-      set({ systemIsDarkMode: mediaQuery.matches });
+      const mode = get().themeMode;
+      const isDarkMode = mode === 'dark' || (mode === 'auto' && mediaQuery.matches);
+      set({ systemIsDarkMode: mediaQuery.matches, isDarkMode });
     };
 
     mediaQuery.addEventListener('change', handleSystemThemeChange);