如何结合prefers-color-scheme和CSS变量做暗黑模式-css教程-PHP中文网

@media (prefers-color-scheme: dark) 仅响应系统主题变化，不感知 localstorage 或用户点击，需配合 html[data-theme="dark"] 才能共存并优先覆盖；变量须先定义默认值再用媒体查询和 data-theme 双重覆盖，且所有颜色必须用 var() 引用。

如何结合prefers-color-scheme和css变量做暗黑模式

只用 @media (prefers-color-scheme: dark) 覆盖 :root 变量，就能让页面随系统自动变暗——但用户点“手动切深色”时没反应，是因为媒体查询不存状态、也不响应 JS 操作。

为什么 `@media (prefers-color-scheme: dark)` 不能单独用

它只监听系统设置变化，不感知 localStorage 或用户点击；刷新后一切回退；无法覆盖用户主动选择。常见错误现象：html 上加了 class="dark"，但 CSS 里没写 html.dark :root 覆盖变量，结果颜色还是亮的。

@media (prefers-color-scheme: dark) 必须写完整，不能简写成 @media (prefers-color-scheme)，否则无效
它只在初始渲染和系统主题切换时触发，JS 改 document.documentElement.classList 完全不影响它
变量必须定义在 :root 下，且默认值（亮色）要先声明，再用媒体查询覆盖——反过来会导致未匹配时变量为 unset

怎么让 `:root` 同时响应系统 + 手动切换

关键不是二选一，而是共存：媒体查询负责兜底初始值，html[data-theme="dark"] 负责接管用户选择。所有变量覆盖必须写两遍：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

:root {
  --bg: #fff;
  --text: #333;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --text: #e0e0e0;
  }
}
html[data-theme="dark"] :root {
  --bg: #121212;
  --text: #e0e0e0;
}

优先级上，html[data-theme="dark"] :root 高于媒体查询，能压过它
变量名必须语义化，比如 --bg-primary，别用 --dark-bg-500 这种带视觉暗示的命名
不要在变量里塞 rgba() 或透明度，暗色下叠加容易发灰；改用 hsl() 或独立 --opacity 控制

如何初始化并同步 `data-theme` 和 `localStorage`

页面加载时，得先读 localStorage.getItem('theme')，有值就设 document.documentElement.setAttribute('data-theme', value)；没值才 fallback 到 matchMedia('(prefers-color-scheme: dark)').matches。

必须在 HTML 渲染前执行（比如放在 <script></script> 内联在末尾），否则首屏会闪白
监听系统变化时，只在用户没手动选过主题时才更新 data-theme，避免覆盖用户偏好
给加 <meta name="color-scheme" content="light dark">，否则原生控件（如 <input>、滚动条）不会自动适配