PDF: Support custom background theming for PDF files, closes #1649 (#1661)

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

@@ -136,7 +136,7 @@ const FoliateViewer: React.FC<{
       mountAdditionalFonts(detail.doc, isCJKLang(bookData.book?.primaryLanguage));
 
       if (bookDoc.rendition?.layout === 'pre-paginated') {
-        applyFixedlayoutStyles(detail.doc);
+        applyFixedlayoutStyles(detail.doc, viewSettings);
       }
 
       applyImageStyle(detail.doc);
@@ -317,9 +317,13 @@ const FoliateViewer: React.FC<{
     if (viewRef.current && viewRef.current.renderer) {
       const viewSettings = getViewSettings(bookKey)!;
       viewRef.current.renderer.setStyles?.(getStyles(viewSettings));
+      if (bookDoc.rendition?.layout === 'pre-paginated') {
+        const docs = viewRef.current.renderer.getContents();
+        docs.forEach(({ doc }) => applyFixedlayoutStyles(doc, viewSettings));
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [themeCode, isDarkMode]);
+  }, [themeCode, isDarkMode, viewSettings?.overrideColor, viewSettings?.invertImgColorInDark]);
 
   useEffect(() => {
     if (viewRef.current && viewRef.current.renderer && viewSettings) {

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

@@ -539,16 +539,39 @@ export const applyImageStyle = (document: Document) => {
   });
 };
 
-export const applyFixedlayoutStyles = (document: Document) => {
-  const style = document.createElement('style');
+export const applyFixedlayoutStyles = (
+  document: Document,
+  viewSettings: ViewSettings,
+  themeCode?: ThemeCode,
+) => {
+  if (!themeCode) {
+    themeCode = getThemeCode();
+  }
+  const { bg, fg, primary, isDarkMode } = themeCode;
+  const overrideColor = viewSettings.overrideColor!;
+  const invertImgColorInDark = viewSettings.invertImgColorInDark!;
+
+  const existingStyleId = 'fixed-layout-styles';
+  let style = document.getElementById(existingStyleId) as HTMLStyleElement;
+  if (style) {
+    style.remove();
+  }
+  style = document.createElement('style');
+  style.id = existingStyleId;
   style.textContent = `
-    html, body {
-      overflow: hidden;
-      height: 100%;
-      width: 100%;
+    html {
+      --theme-bg-color: ${bg};
+      --theme-fg-color: ${fg};
+      --theme-primary-color: ${primary};
+      color-scheme: ${isDarkMode ? 'dark' : 'light'};
     }
     body {
       position: relative;
+      background-color: var(--theme-bg-color);
+    }
+    img, canvas {
+      ${isDarkMode && invertImgColorInDark ? 'filter: invert(100%);' : ''}
+      ${!isDarkMode && overrideColor ? 'mix-blend-mode: multiply;' : ''}
     }
     img.singlePage {
       position: relative;