diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
index 04fb4032..b9fcc104 100644
--- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
+++ b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx
@@ -30,6 +30,7 @@ import {
   applyThemeModeClass,
   applyTranslationStyle,
   getStyles,
+  getThemeCode,
   keepTextAlignment,
   transformStylesheet,
 } from '@/utils/style';
@@ -203,7 +204,8 @@ const FoliateViewer: React.FC<{
     const detail = (event as CustomEvent).detail;
     console.log('doc index loaded:', detail.index);
     if (detail.doc) {
-      const writingDir = viewRef.current?.renderer.setStyles && getDirection(detail.doc);
+      const renderer = viewRef.current?.renderer;
+      const writingDir = renderer?.setStyles && getDirection(detail.doc);
       const viewSettings = getViewSettings(bookKey)!;
       const bookData = getBookData(bookKey)!;
 
@@ -230,6 +232,13 @@ const FoliateViewer: React.FC<{
 
       if (bookDoc.rendition?.layout === 'pre-paginated') {
         applyFixedlayoutStyles(detail.doc, viewSettings);
+        const themeCode = getThemeCode();
+        if (themeCode && renderer) {
+          renderer.pageColors = {
+            background: themeCode.bg,
+            foreground: themeCode.fg,
+          };
+        }
       }
 
       applyImageStyle(detail.doc);
@@ -616,6 +625,15 @@ const FoliateViewer: React.FC<{
         applyScrollModeClass(doc, viewSettings.scrolled || false);
         applyScrollbarStyle(document, viewSettings.hideScrollbar || false);
       });
+
+      if (bookDoc.rendition?.layout === 'pre-paginated') {
+        if (themeCode && viewRef.current?.renderer) {
+          viewRef.current.renderer.pageColors = {
+            background: themeCode.bg,
+            foreground: themeCode.fg,
+          };
+        }
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
diff --git a/apps/readest-app/src/types/view.ts b/apps/readest-app/src/types/view.ts
index 3f3d5769..0e65929a 100644
--- a/apps/readest-app/src/types/view.ts
+++ b/apps/readest-app/src/types/view.ts
@@ -72,6 +72,10 @@ export interface FoliateView extends HTMLElement {
     atEnd: boolean;
     containerPosition: number;
     sideProp: 'width' | 'height';
+    pageColors?: {
+      background: string;
+      foreground: string;
+    };
     setAttribute: (name: string, value: string | number) => void;
     removeAttribute: (name: string) => void;
     next: () => Promise<void>;
diff --git a/packages/foliate-js b/packages/foliate-js
index f015af24..b4f8398f 160000
--- a/packages/foliate-js
+++ b/packages/foliate-js
@@ -1 +1 @@
-Subproject commit f015af243569ad3a962499ecb20311fee3ed8676
+Subproject commit b4f8398fe54ae5e353c25334f0afa6a859c97551