【高频考点精讲】前端暗黑模式实现：从CSS变量到系统偏好检测

最新推荐文章于 2025-05-09 21:13:14 发布

全栈老李技术面试

最新推荐文章于 2025-05-09 21:13:14 发布

阅读量974

点赞数 30

分类专栏：前端高频考点精讲文章标签：前端 javascript html css 面试题 react vue

本文链接：https://blog.csdn.net/liuyun_12138/article/details/147784150

版权

前端暗黑模式实现：从CSS变量到系统偏好检测

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

大家好，我是全栈老李，今天咱们聊聊前端开发里一个既实用又酷炫的功能——暗黑模式。现在不管是App还是网页，暗黑模式几乎成了标配，不仅能减少眼睛疲劳，还能提升产品调性。那怎么在前端优雅地实现它呢？今天咱们从CSS变量聊到系统偏好检测，手把手教你写出健壮的暗黑模式方案。

一、CSS变量：暗黑模式的基石

暗黑模式的核心是颜色切换，而CSS变量（Custom Properties）是实现这一目标的完美工具。它让我们可以动态修改样式，而不需要写一堆重复的代码。

先来看个基础例子：

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

[data-theme="dark"] {
   
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
  --primary-color: #52c41a;
}

body {
   
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* 平滑过渡效果，全栈老李提醒你加上这个会更丝滑 */
}

button {
   
  background-color: var(--primary-color);
}

这里我们定义了两套变量，一套是默认的亮色模式，另一套是暗色模式。通过data-theme属性切换，就能实现主题的实时切换。

二、JavaScript动态切换

光有CSS变量还不够，我们还需要用JavaScript来动态切换主题。比如用户点击一个按钮，就能切换亮暗模式：

<button id="theme-toggle">切换暗黑模式</button>

const themeToggle = document.getElementById('theme-toggle');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

// 初始化主题（全栈老李提醒：这里可以结合本地存储，记住用户的选择）
let currentTheme = localStorage.getItem('theme'