必须在顶部用内联脚本初始化document.documentelement.dataset.theme，否则页面必闪屏；手动切换、系统偏好、localstorage三者优先级不能错，否则用户点了没反应或一刷新就回退。

必须在 顶部用内联脚本初始化 document.documentElement.dataset.theme，否则页面必闪屏；手动切换、系统偏好、localStorage 三者优先级不能错，否则用户点了没反应或一刷新就回退。

为什么初始化必须塞进 最前面

浏览器渲染时，CSS 加载后立刻应用样式。如果 JS 等到 DOMContentLoaded 才读 localStorage 并设 data-theme，页面已按默认浅色渲染完毕，再切主题就会视觉跳变（俗称“闪白”）。

• 把初始化脚本写成内联 <script></script>，且严格放在所有 <link rel="stylesheet"> 之前
• 必须操作 document.documentElement，不是 document.body —— 否则 :root 变量、伪元素、滚动条颜色全都不生效
• 示例代码要这样写：

  <script>
  const saved = localStorage.getItem('theme');
  const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  document.documentElement.dataset.theme = saved ?? (systemPrefersDark ? 'dark' : 'light');
  </script><link rel="stylesheet" href="style.css">

window.matchMedia 监听系统变更的正确写法

window.matchMedia 返回的是一个 MediaQueryList 实例，它不会自动重执行；只调一次 .matches 不够，必须显式监听 change 事件，否则用户在系统设置里切了深色模式，网页毫无反应。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 监听必须在初始化之后立即注册，不能延迟到某个按钮点击后才加
• 回调里要同步更新 dataset.theme 和 localStorage，否则下次刷新仍沿用旧值
• 避免重复注册：保存 matchMedia 实例引用，销毁前先 .removeEventListener（尤其在编辑器等热重载场景）
• 不要只靠它做主控——localStorage 有值时，应以用户选择为第一优先级，系统偏好仅作 fallback

data-theme 和 CSS 变量联动不生效的常见原因

CSS 变量本身不响应属性变化，必须靠属性选择器触发重计算。很多“切了没反应”的问题，根源是选择器写错了或权重不够。

• 必须写成 html[data-theme="light"] { --bg: #fff; } 和 html[data-theme="dark"] { --bg: #1a1a1a; }，漏掉 html 前缀会导致匹配失败
• 不能只在 @media (prefers-color-scheme: dark) 里定义变量，那无法响应 JS 切换；两套变量都要显式写出
• 所有可变色样式（background-color、color、border-color、box-shadow、fill）都必须用 var(--bg)，硬编码值会绕过主题系统
• 别在组件级 CSS 里重复定义变量值，统一收口在 :root 级联规则中

如何让地址栏、输入框等浏览器 UI 也同步变暗

页面 CSS 变了，但 Chrome 地址栏还是白的、iOS 输入框边框仍是浅灰——这是因为浏览器 UI 颜色由 <meta name="color-scheme"> 控制，它不会随 JS 自动更新。

• 初始加载时就要从 localStorage 读取主题，并设 <meta name="color-scheme" content="light dark">（注意两个值都要写）
• 每次 JS 切换主题后，必须显式更新该 meta：

  document.querySelector('meta[name="color-scheme"]').content = 'light dark';

• 这个 meta 标签要放在 里，且在任何样式表之前
• 不支持 prefers-color-scheme 的旧 WebView（如微信内置浏览器）会忽略媒体查询，但 meta 至少能保证原生控件基础适配

真正麻烦的不是切主题本身，而是那些独立维护 class 或内联样式的 UI 组件（比如弹窗、工具栏、行号）是否同步响应。它们往往需要额外透传主题上下文，或者统一用 CSS 自定义属性驱动，否则 JS 改了 data-theme，它们却纹丝不动。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！