css颜色与媒体查询结合适配深色模式-css教程-PHP中文网

css颜色与媒体查询结合适配深色模式

P粉602998670

发布： 2025-11-12 21:38:00

原创

569人浏览过

使用 prefers-color-scheme 媒体查询结合 CSS 变量可实现深色模式适配：1. 通过 @media (prefers-color-scheme: dark) 检测系统偏好；2. 在 :root 中定义 --bg-color 和 --text-color 变量并根据模式重写；3. 应用 transition 实现平滑颜色过渡；4. 确保亮色默认样式以支持旧浏览器，提升兼容性与体验。

css颜色与媒体查询结合适配深色模式

现代网页设计中，适配深色模式已成为提升用户体验的重要一环。通过结合CSS颜色变量与媒体查询，可以轻松实现根据用户系统偏好自动切换亮色与深色主题。

使用 prefers-color-scheme 媒体查询

浏览器提供了 prefers-color-scheme 这个CSS媒体特性，用于检测用户的系统是否启用了深色模式。它有两个常用值：light 表示用户偏好浅色界面，dark 表示偏好深色界面。

你可以这样写：

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

@media (prefers-color-scheme: light) {
  body {
    background-color: #ffffff;
    color: #333333;
  }
}

登录后复制

结合CSS自定义属性统一管理颜色

为了更高效地维护主题颜色，推荐使用CSS变量定义颜色方案。将颜色集中定义在 :root 中，并在媒体查询中重写深色模式下的变量值。

立即学习“前端免费学习笔记（深入）”；

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

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

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

登录后复制

这样结构清晰，便于扩展更多主题（如跟随系统或手动切换）。