Skip to content

fix(reader): 对齐 WebView 颜色方案与 app 主题,让书籍自适应 CSS(light-dark / prefers-color-scheme)选取正确配色分支 - #670

Open
k6G52m4Dz75W wants to merge 1 commit into
codedogQBY:mainfrom
k6G52m4Dz75W:fix/reader-color-scheme
Open

fix(reader): 对齐 WebView 颜色方案与 app 主题,让书籍自适应 CSS(light-dark / prefers-color-scheme)选取正确配色分支#670
k6G52m4Dz75W wants to merge 1 commit into
codedogQBY:mainfrom
k6G52m4Dz75W:fix/reader-color-scheme

Conversation

@k6G52m4Dz75W

Copy link
Copy Markdown
Contributor

症状

Windows 为深色系统偏好时,sepia(及浅色)主题下,书里使用 light-dark()@media(prefers-color-scheme: dark) 的 CSS 渲染异常。典型例子:书 CSS 给 h1border-bottom: thin dashed light-dark(#1a1a1a, #e5e5e5),在 sepia 背景 #f0e6d2 上边框被渲染成 #e5e5e5 浅灰——完全看不见;dark 主题下则正常。

根因

这类书 CSS 自带了"浅色 / 深色"两套配色,浏览器依据颜色方案偏好prefers-color-scheme 以及 light-dark() 的解析)选其一。原来该偏好来自系统 / WebView,与 app 主题无关:

  • 系统是深色 → 书永远走"深色分支"(如 #e5e5e5 浅色边框);
  • app 主题是 sepia / light(浅色)时,书却用了深色分支的浅色值,叠在浅色背景上看不见;
  • 镜像问题同样存在:系统是浅色、app 主题是 dark 时,书走浅色分支的深色值,在深色背景下看不清。

修复

把 WebView 的颜色方案偏好同步为 app 主题:

  • dark'dark'
  • light / sepia'light'

main.tsxMutationObserver 监听 data-theme,同步调用 core:appset_app_theme,经 wry 映射到 WebView2 SetPreferredColorScheme。这样书的自适应 CSS 会选取与 app 主题一致的那套配色(浅色主题 → 浅色分支,深色主题 → 深色分支)。启动恢复已保存主题后补一次初始同步。capabilities 增加 core:app:allow-set-app-theme 权限。

说明:本修复只改变"书 CSS 自适应配色分支的选取",不覆盖书 CSS 的任何值。固定色值(非 light-dark() / media query)的书籍不受影响;阅读器强制 html/body 背景与前景为主题色是既有行为。

验证

  • 系统深色 + app dark:边框白色可见(深色分支);
  • 系统深色 + app sepia / light:边框深色清晰可见(浅色分支);
  • 固定色值(非自适应)书籍渲染不受影响。

测试建议

用 pandoc / Calibre 导出的、含 light-dark() / prefers-color-scheme 的书籍,在系统偏好为深色的环境下:dark 主题显示深色分支、sepia / light 显示浅色分支;另用一本固定色值的书确认渲染不变。

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant