如何在CSS中设置网页暗黑模式自适应跟随系统-css教程-PHP中文网

在css中设置网页暗黑模式自适应跟随系统，核心做法是使用媒体查询 (prefers-color-scheme: dark)。只需在样式表中定义该媒体查询块，并在其中编写针对深色背景的样式规则，浏览器会自动检测用户操作系统的主题偏好并应用相应样式。

如何在CSS中设置网页暗黑模式自适应跟随系统

如何为特定元素定义深色背景与文字颜色

直接通过覆盖 background-color 和 color 属性即可实现基础适配。例如，将页面主体背景设为深灰，文字设为浅灰，以确保对比度符合无障碍标准。

如何在CSS中设置网页暗黑模式自适应跟随系统

body {
  background-color: #ffffff;
  color: #000000;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #e0e0e0;
  }
}

上述代码中，默认样式适用于浅色模式。当系统切换至暗黑模式时，媒体查询生效，背景变为 #121212，文字变为 #e0e0e0。这种硬编码方式简单直接，但缺乏灵活性。

如何利用CSS变量简化暗黑模式维护

使用 CSS 自定义属性（变量）可以大幅减少重复代码。通过在根节点定义变量，并在媒体查询中重新赋值，实现一键切换主题。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

如何在CSS中设置网页暗黑模式自适应跟随系统

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --border-color: #cccccc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --border-color: #333333;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

此方案中，:root 定义了浅色模式的默认值。媒体查询内仅修改变量值，所有使用该变量的元素自动更新。这种方式便于后续扩展更多主题或手动切换功能。