fix: also set color-scheme in iframe for Safari (#616)

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

@@ -9,7 +9,7 @@ import { useClickEvent, useTouchEvent } from '../hooks/useIframeEvents';
 import { useFoliateEvents } from '../hooks/useFoliateEvents';
 import { useProgressSync } from '../hooks/useProgressSync';
 import { useProgressAutoSave } from '../hooks/useProgressAutoSave';
-import { getStyles, mountAdditionalFonts } from '@/utils/style';
+import { applyColorScheme, getStyles, mountAdditionalFonts } from '@/utils/style';
 import { getBookDirFromLanguage, getBookDirFromWritingMode } from '@/utils/book';
 import { useUICSS } from '@/hooks/useUICSS';
 import {
@@ -64,6 +64,7 @@ const FoliateViewer: React.FC<{
       viewSettings.rtl = writingDir?.rtl || viewSettings.writingMode.includes('rl') || false;
       setViewSettings(bookKey, viewSettings);
 
+      applyColorScheme(detail.doc, isDarkMode);
       mountAdditionalFonts(detail.doc);
 
       if (!detail.doc.isEventListenersAdded) {
@@ -122,6 +123,9 @@ const FoliateViewer: React.FC<{
     if (viewRef.current && viewRef.current.renderer) {
       const viewSettings = getViewSettings(bookKey)!;
       viewRef.current.renderer.setStyles?.(getStyles(viewSettings));
+      // Safari does not recognize color-scheme from the root document in iframe
+      const doc = viewRef.current.renderer.getContents()[0]!.doc;
+      applyColorScheme(doc, isDarkMode);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [themeCode, isDarkMode]);

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

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { useThemeStore } from '@/store/themeStore';
 import { useSettingsStore } from '@/store/settingsStore';
 import { applyCustomTheme } from '@/styles/themes';
+import { applyColorScheme } from '@/utils/style';
 
 export const useTheme = () => {
   const { settings } = useSettingsStore();
@@ -15,7 +16,7 @@ export const useTheme = () => {
 
   useEffect(() => {
     const colorScheme = isDarkMode ? 'dark' : 'light';
-    document.documentElement.style.setProperty('color-scheme', colorScheme);
     document.documentElement.setAttribute('data-theme', `${themeColor}-${colorScheme}`);
+    applyColorScheme(document, isDarkMode);
   }, [themeColor, isDarkMode]);
 };

apps/readest-app/src/types/view.ts

@@ -46,6 +46,7 @@ export interface FoliateView extends HTMLElement {
     prev: () => Promise<void>;
     goTo?: (params: { index: number; anchor: number }) => void;
     setStyles?: (css: string) => void;
+    getContents: () => { doc: Document; index?: number }[];
     addEventListener: (type: string, listener: EventListener) => void;
     removeEventListener: (type: string, listener: EventListener) => void;
   };

apps/readest-app/src/utils/style.ts

@@ -359,3 +359,8 @@ export const mountAdditionalFonts = (document: Document) => {
   style.textContent = getAdditionalFontFaces();
   document.head.appendChild(style);
 };
+
+export const applyColorScheme = (document: Document, isDarkMode: boolean) => {
+  const colorScheme = isDarkMode ? 'dark' : 'light';
+  document.documentElement.style.setProperty('color-scheme', colorScheme);
+};