优先确认webview是否透传系统深色偏好：ios wkwebview默认不启用，低版本android webview可能不支持；需通过matchmedia('(prefers-color-scheme: dark)').matches实测返回值，false即表明未透传，此时应改用app主动通知（如themechanged事件）或手动同步data-theme与localstorage。
WebView 里 prefers-color-scheme 始终返回 false 怎么办
不是 CSS 写错了，是 WebView 根本没把系统深色偏好透传进来。iOS WKWebView 默认不启用该能力，Android WebView 低版本（setForceDark 也会静默丢弃信号。
验证方式很简单：在控制台执行 console.log(window.matchMedia('(prefers-color-scheme: dark)').matches)，如果始终是 false，就说明媒体查询压根没被识别。
此时靠纯 CSS 的 @media (prefers-color-scheme: dark) 完全无效，必须用 JS 注入兜底：
- 在页面最顶部的
<script></script>中立即读取matchMedia，并同步设置document.documentElement.setAttribute('data-theme', 'dark') - 不要等
DOMContentLoaded或 React/Vue 挂载——闪屏就发生在这几十毫秒里 - 若注入失败（比如 WebView 禁用了 JS 执行），需配合原生层主动传参，例如通过 URL query string 或
window.ReactNativeWebView通信
color-scheme: light dark 在 WebView 中为什么没效果
这个声明本身不触发样式变化，它只是“告诉浏览器：我支持双主题”，但前提是浏览器得愿意听。iOS 13.3 以下、Android WebView
更关键的是：color-scheme 只影响原生控件（滚动条、<input> 边框、CanvasText 等），不影响你写的 .card 或 h1 ——这些还得靠 data-theme + CSS 变量驱动。
所以别只加这一行就以为万事大吉：
基于三引擎设计，从微信文章、新闻和博客网页提取干净内容，支持标题作者日期元数据，多格式和批量处理。
- 必须搭配
html[data-theme="dark"] { --bg: #121212; }这类显式变量重定义 - 所有用到颜色的地方都要写 fallback：
background: var(--bg, #fff)，否则未命中时直接退到浏览器默认值（可能白得刺眼） - 检查是否被第三方库覆盖：Ant Design、Vant 等常动态加
.dark类，和你的[data-theme="dark"]优先级冲突，要用html[data-theme="dark"] .van-button显式提高权重
JS 监听 matchMedia change 事件在 WebView 中失效的原因
很多 WebView 容器只在首次加载时评估一次 matchMedia，之后系统切换主题，addEventListener('change', ...) 根本不触发——这不是 bug，是设计如此。
真实项目中更可靠的做法是轮询 + 主动同步：
- 用
setInterval(() => { ...matchMedia.matches... }, 2000)每两秒检查一次（iOS WKWebView 实测有效） - 监听原生层发来的自定义事件（如
themeChanged），由 App 主动通知 Web 页面主题已变 - 手动切换按钮必须同时改
data-theme和localStorage，否则下次打开还是系统默认值，造成“用户点了暗黑，重启后又变亮”
CSS 变量在 WebView 中未生效的三个典型位置错误
变量不是全局常量，声明位置错一点，深色下就全白底黑字。
最容易翻车的写法：
- 把
:root默认值写在@media后面：CSS 是顺序解析的，后面声明会覆盖前面，导致深色规则被浅色值冲掉 - 在组件 scoped style 里定义变量（如 Vue 单文件组件的
<style scoped></style>）：作用域隔离后，@media无法访问该变量 - 用
body.dark { --bg: #000; }而非html[data-theme="dark"] { --bg: #000; }：前者依赖 class 切换，后者能和 media 查询并存，兼容性更好
真正稳的结构只有两种：要么全用 data-theme + JS 控制，要么确保 :root 默认值在最前、@media 覆盖在最后、且所有变量名完全一致——漏一个，就有一个地方崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
