diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
index 96f17aac..a9b712ea 100644
--- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
+++ b/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;
diff --git a/apps/readest-app/src/hooks/useTheme.ts b/apps/readest-app/src/hooks/useTheme.ts
index afc543c9..ef811270 100644
--- a/apps/readest-app/src/hooks/useTheme.ts
+++ b/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]);
 };
diff --git a/apps/readest-app/src/store/themeStore.ts b/apps/readest-app/src/store/themeStore.ts
index bbbafbf9..845fa716 100644
--- a/apps/readest-app/src/store/themeStore.ts
+++ b/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);