如何在CSS中编写适配深色模式的现代选择器逻辑？-css教程-PHP中文网

最可靠方式是用@media (prefers-color-scheme: dark)配合:root中的css变量；必须先在:root定义明亮模式默认值，再用媒体查询覆盖暗色值，否则未匹配时变量未定义导致样式失效。

如何在css中编写适配深色模式的现代选择器逻辑？

直接用 @media (prefers-color-scheme: dark) 配合 :root 变量，是最轻量、最可靠、浏览器原生支持的方案；别写 class 切换逻辑来模拟它，除非你明确需要手动覆盖系统偏好。

为什么不能把 CSS 变量定义在 `@media` 里再全局用

CSS 变量作用域是“声明处生效”，@media 块内定义的变量只在该块内部有效。写成这样是无效的：

:root {
  --bg: #fff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1e1e; /* ✅ 正确：重设顶层 :root 的变量 */
  }
  .card {
    --card-bg: #2d2d2d; /* ❌ 错误：这个 --card-bg 在外部无法访问 */
  }
}

必须把所有基础变量先在顶层 :root 中声明，默认值为浅色；深色规则只能是“重写”，不是“新增”。

变量名必须完全一致，否则不会覆盖
不要只改部分变量（比如改了 --bg 却漏掉 --border），组件会混用明暗色值
嵌套过深的 fallback（如 var(--a, var(--b, #000))）在低端设备上可能延迟计算

`@media (prefers-color-scheme: dark)` 必须单独、顶层、后置

它不提升选择器优先级，只靠层叠顺序生效。如果写在默认样式前面，或者被包裹在其他媒体查询里，就会失效：

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

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

下载

@media (max-width: 768px) {
  @media (prefers-color-scheme: dark) { /* ❌ 旧版 Safari 直接忽略 */
    :root { --bg: #121212; }
  }
}

正确写法是独立、顶层、且放在所有默认样式之后：

:root {
  --bg: #ffffff;
  --text: #333333;
  --border: #e2e8f0;
}
/* ✅ 必须放在这之后 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --text: #e0e0e0;
    --border: #334155;
  }
}