怎么用CSS3实现暗黑模式与白天模式的一键切换-css教程-PHP中文网

prefers-color-scheme是CSS媒体查询特性，用于只读检测系统主题偏好（light/dark/no-preference），无需JS即可自动适配；它响应系统设置变更，但不支持手动切换，需结合CSS变量与documentElement class控制实现用户覆盖和持久化。

怎么用css3实现暗黑模式与白天模式的一键切换

如何用 `prefers-color-scheme` 检测系统主题并自动适配

浏览器原生支持系统级暗黑/白天模式检测，不用 JS 也能做基础切换 —— 关键是 prefers-color-scheme 媒体查询。它不是“开关”，而是“响应器”：只读取系统设置，不控制状态。

常见错误是以为写了 @media (prefers-color-scheme: dark) 就能强制切暗色，结果手动点按钮没反应 —— 那是因为它不监听用户点击，只监听系统偏好变更。

必须配合 :root 中的 CSS 自定义属性（--bg、--text 等）才能统一管理颜色变量
若用户系统设为“自动（跟随日出日落）”，该媒体查询会随系统实时变化，页面也会重绘
在 Safari 12.1+、Chrome 76+、Firefox 95+ 中稳定支持；旧版 iOS Safari 需加 -webkit- 前缀（但基本可忽略）

怎么用 JS 控制手动切换并持久化用户选择

用户点了“切暗色”按钮，你得记住他选了什么，并覆盖系统默认。核心是两步：改 document.documentElement 的 class，再存到 localStorage。

别直接改 body class —— 优先级低、易被其他样式干扰；也别用 style 标签动态插入 CSS —— 不利于维护和 SSR 兼容。

约定 class 名如 theme-dark 和 theme-light，写在 :root 外层统一控制
切换时先读 localStorage.getItem('theme')，再调用 document.documentElement.classList.toggle()
务必在 JS 执行前就给加一个默认 class（比如 theme-auto），避免首次渲染闪白/闪黑
监听 storage 事件，让多标签页同步主题（否则 A 标签切了，B 标签还是旧的）

`color-scheme` meta 标签和 CSS 属性的作用与限制

是告诉浏览器：“我这个页面支持两种主题”，它影响的是表单控件、滚动条、地址栏等**原生 UI 元素**的颜色，不影响你写的 CSS。

Expanso yaml-to-json

使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。

下载

而 CSS 中的 color-scheme: light dark 是作用于某个元素及其子元素的，比如：article { color-scheme: dark; } 会让其中的显示暗色原生样式。但它不能替代主题逻辑。

不加该 meta 标签，iOS Safari 可能强制把表单控件渲染成亮色，即使你 CSS 设了暗背景 —— 输入框文字就看不见了
color-scheme CSS 属性目前仅 Chromium 和 Safari 支持，Firefox 忽略；且它不触发重排，只是“建议”浏览器怎么画原生控件
它不能解决自定义组件（如轮播图、弹窗）的配色问题，那些还得靠 class + CSS 变量

为什么 CSS 变量 + JS 切换比纯 class 方案更可靠

有人用 .dark .btn 和 .light .btn 写两套规则，看似简单，但维护成本高：每加一个新组件，就得补两组规则；颜色值散落在各处，换主色要全局搜。

用 CSS 变量把所有主题色收口到 :root 和对应 class 下，JS 只管切 class，CSS 自动响应 —— 这才是可持续的方案。

示例结构：

:root {
  --bg: #fff;
  --text: #333;
}
.theme-dark {
  --bg: #1e1e1e;
  --text: #eee;
}
body {
  background-color: var(--bg);
  color: var(--text);
}

注意：不要在 @media (prefers-color-scheme: dark) 里重复定义变量 —— 它和 JS 切换的 class 是并行关系，冲突时 class 优先级更高（因为更具体）
如果用了 CSS-in-JS 库（如 Emotion），确保它支持服务端注入主题 class，否则首屏可能错乱

最常被忽略的点是：没处理「系统设为自动」+「用户手动切过」的混合状态。这时候不能只信 prefers-color-scheme，得优先读 localStorage；但也要监听 matchMedia('(prefers-color-scheme: dark)').addEventListener，以便系统夜间自动切换时，用户没操作也能跟上。