fix(reader): 对齐 WebView 颜色方案与 app 主题,让书籍自适应 CSS(light-dark / prefers-color-scheme)选取正确配色分支 - #670
Open
k6G52m4Dz75W wants to merge 1 commit into
Open
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
症状
Windows 为深色系统偏好时,sepia(及浅色)主题下,书里使用
light-dark()或@media(prefers-color-scheme: dark)的 CSS 渲染异常。典型例子:书 CSS 给h1设border-bottom: thin dashed light-dark(#1a1a1a, #e5e5e5),在 sepia 背景#f0e6d2上边框被渲染成#e5e5e5浅灰——完全看不见;dark 主题下则正常。根因
这类书 CSS 自带了"浅色 / 深色"两套配色,浏览器依据颜色方案偏好(
prefers-color-scheme以及light-dark()的解析)选其一。原来该偏好来自系统 / WebView,与 app 主题无关:#e5e5e5浅色边框);修复
把 WebView 的颜色方案偏好同步为 app 主题:
dark→'dark'light/sepia→'light'在
main.tsx用MutationObserver监听data-theme,同步调用core:app的set_app_theme,经 wry 映射到 WebView2SetPreferredColorScheme。这样书的自适应 CSS 会选取与 app 主题一致的那套配色(浅色主题 → 浅色分支,深色主题 → 深色分支)。启动恢复已保存主题后补一次初始同步。capabilities 增加core:app:allow-set-app-theme权限。验证
测试建议
用 pandoc / Calibre 导出的、含
light-dark()/prefers-color-scheme的书籍,在系统偏好为深色的环境下:dark 主题显示深色分支、sepia / light 显示浅色分支;另用一本固定色值的书确认渲染不变。