From 2b5fb6b21fdfe67b014df4b148e641b709aa75c8 Mon Sep 17 00:00:00 2001
From: k6G52m4Dz75W <74605402+k6G52m4Dz75W@users.noreply.github.com>
Date: Wed, 12 Aug 2026 23:46:55 +0800
Subject: [PATCH] fix(reader): sync WebView color scheme with app theme

Books that use light-dark() or @media(prefers-color-scheme) in their CSS
(e.g. Calibre/pandoc output) resolve colors against the OS color scheme,
not the app theme. On a dark-mode OS the reader rendered dark-mode book
colors even in sepia/light app themes: e.g. an h1 dashed border became
#e5e5e5 on the sepia #f0e6d2 background, i.e. invisible.

Follow the app theme: dark -> 'dark', light/sepia -> 'light', via
core:app set_app_theme, which maps to the WebView preferred color
scheme (wry -> ICoreWebView2 SetPreferredColorScheme). Wired through a
MutationObserver on data-theme so every theme switch is applied, plus
an initial sync after the saved theme is restored.
---
 .../app/src-tauri/capabilities/default.json    |  1 +
 packages/app/src/main.tsx                      | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/packages/app/src-tauri/capabilities/default.json b/packages/app/src-tauri/capabilities/default.json
index 90efbe309..8a5d896e2 100644
--- a/packages/app/src-tauri/capabilities/default.json
+++ b/packages/app/src-tauri/capabilities/default.json
@@ -5,6 +5,7 @@
   "windows": ["main"],
   "permissions": [
     "core:default",
+    "core:app:allow-set-app-theme",
     "core:window:allow-close",
     "core:window:allow-minimize",
     "core:window:allow-start-dragging",
diff --git a/packages/app/src/main.tsx b/packages/app/src/main.tsx
index 1d90de191..8c026127b 100644
--- a/packages/app/src/main.tsx
+++ b/packages/app/src/main.tsx
@@ -21,6 +21,7 @@ import {
 } from "@readany/core/rag";
 import { setPlatformService } from "@readany/core/services";
 import { fetch as tauriFetch } from "@tauri-apps/plugin-http";
+import { setTheme as setTauriTheme } from "@tauri-apps/api/app";
 import { TauriPlatformService } from "./lib/platform/tauri-platform-service";
 import { syncLegacyDesktopLibraryRootConfig } from "./lib/storage/desktop-library-root";
 import { TauriVectorDB } from "./lib/tauri-vector-db";
@@ -31,6 +32,19 @@ import { useVectorModelStore } from "./stores/vector-model-store";
 
 installFeedbackLogCapture();
 
+// Keep the WebView color scheme in sync with the app theme so book CSS that
+// relies on light-dark() / @media(prefers-color-scheme) follows the app theme
+// instead of the OS scheme (e.g. sepia maps to a light scheme, so borders/text
+// in light-mode colors stay visible instead of the OS dark-mode colors).
+function syncSystemTheme() {
+  const theme = document.documentElement.getAttribute("data-theme");
+  void setTauriTheme(theme === "dark" ? "dark" : "light").catch(() => {});
+}
+new MutationObserver(syncSystemTheme).observe(document.documentElement, {
+  attributes: true,
+  attributeFilter: ["data-theme"],
+});
+
 const FEEDBACK_WORKER_FALLBACK = "https://feedback.readany.top";
 const feedbackWorkerUrl = import.meta.env.VITE_FEEDBACK_WORKER_URL?.trim() || FEEDBACK_WORKER_FALLBACK;
 setFeedbackWorkerUrl(feedbackWorkerUrl);
@@ -122,6 +136,10 @@ i18nReady.then(() => {
     document.documentElement.setAttribute("data-theme", "sepia");
   }
 
+  // Apply the restored theme to the WebView color scheme (observer above also
+  // keeps it in sync on any later theme switch).
+  syncSystemTheme();
+
   // Restore saved language from platform KV storage
   initI18nLanguage().catch(console.error);