CSS颜色与媒体查询实现深色模式适配

本文深入讲解了如何利用CSS的prefers-color-scheme媒体查询与自定义属性（CSS变量）实现优雅、高效且兼容性良好的深色模式适配——无需JavaScript，仅靠纯CSS即可根据用户系统偏好自动切换主题；通过在:root中统一管理颜色变量、在媒体查询中动态重写值、添加平滑过渡动画，并确保亮色为默认降级方案，既提升了视觉体验与可维护性，又兼顾了旧浏览器支持，是现代网页设计中不可或缺的实用技巧。

现代网页设计中，适配深色模式已成为提升用户体验的重要一环。通过结合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;
}

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

增强视觉体验：添加过渡动画

直接切换颜色可能显得生硬。加入 transition 可使颜色变化更平滑，提升感官体验。

注意：不是所有属性都适合加过渡效果。通常对 background-color 和 color 添加0.2–0.3秒的缓动过渡即可。

考虑默认状态与降级支持

未设置媒体查询时，页面应有合理默认样式（通常是亮色模式）。由于旧版浏览器不支持 prefers-color-scheme，因此确保基础样式可用非常重要。

不需要额外JavaScript即可完成基本适配，语义清晰且性能良好。

理论要掌握，实操不能落！以上关于《CSS颜色与媒体查询实现深色模式适配》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！