使用css变量实现暗黑模式的核心步骤包括：1. 定义变量，2. 应用变量，3. 通过javascript切换类名。首先，在:root中定义亮色模式的颜色变量，在body.dark-theme中重新定义为暗色变量；其次，将这些变量应用到各个元素的样式中；最后，通过javascript控制body类名切换，并利用localstorage保存用户偏好，同时可结合系统偏好自动适配。这种方法集中管理颜色、性能高效且支持动态交互。
CSS中实现暗黑模式，核心思路就是利用CSS变量（Custom Properties）来定义一套可切换的颜色体系。你可以在:root伪类中定义默认（通常是亮色）的颜色变量，然后通过给body或html元素添加一个特定的类（比如dark-theme），在这个类里面重新定义这些变量的值，赋予它们暗色系的颜色。配合一点JavaScript来切换这个类，就能实现主题的动态切换了。这种方案的好处是集中管理颜色，维护起来非常方便，而且性能也很好。
解决方案
要实现暗黑模式的颜色变量切换，大致可以分三步走：定义变量、应用变量、以及通过JavaScript进行切换。
首先，在CSS中定义你的颜色变量。我通常会把亮色模式的颜色作为默认值放在:root下，这样它们是全局可用的。
立即学习“前端免费学习笔记（深入）”；
/* 定义亮色模式的颜色变量 */
:root {
--background-color: #ffffff; /* 主背景色 */
--text-color: #333333; /* 主要文字颜色 */
--primary-color: #007bff; /* 主题色 */
--border-color: #e0e0e0; /* 边框颜色 */
--card-background: #f8f8f8; /* 卡片背景色 */
}
/* 定义暗黑模式的颜色变量，通过一个类名切换 */
body.dark-theme {
--background-color: #1a1a1a;
--text-color: #f0f0f0;
--primary-color: #8bb4e7;
--border-color: #3a3a3a;
--card-background: #2a2a2a;
}
/* 应用这些变量到你的元素上 */
body {
background-color: var(--background-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease; /* 平滑过渡 */
}
a {
color: var(--primary-color);
}
.card {
background-color: var(--card-background);
border: 1px solid var(--border-color);
padding: 20px;
margin: 15px 0;
border-radius: 8px;
transition: background-color 0.3s ease, border-color 0.3s ease;
}接着，在HTML中准备一个触发切换的按钮，以及一个用于存储用户主题偏好的地方（比如body元素本身）。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>暗黑模式示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>我的网站</h1>
<button id="theme-toggle">切换主题</button>
</header>
<main>
<p>这是一段示例文本，用来展示不同主题下的颜色效果。</p>
<div class="card">
<h2>卡片标题</h2>
<p>卡片内容，这里有一些重要的信息。</p>
</div>
</main>
<script src="script.js"></script>
</body>
</html>最后，用JavaScript来控制body元素的类名切换。同时，我通常会考虑用户的系统偏好（prefers-color-scheme）和本地存储，这样用户下次访问时能记住他的选择。
// script.js
document.addEventListener('DOMContentLoaded', () => {
const themeToggleBtn = document.getElementById('theme-toggle');
const body = document.body;
// 检查本地存储中是否有用户设置的主题
const savedTheme = localStorage.getItem('theme');
// 检查用户系统偏好
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
// 初始化主题
if (savedTheme) {
body.classList.add(savedTheme);
} else if (prefersDark) {
body.classList.add('dark-theme');
} else {
// 默认是亮色模式，不需要添加类
}
// 切换主题的事件监听器
themeToggleBtn.addEventListener('click', () => {
if (body.classList.contains('dark-theme')) {
body.classList.remove('dark-theme');
localStorage.setItem('theme', 'light-theme'); // 假设亮色模式对应'light-theme'，实际是移除dark-theme类
} else {
body.classList.add('dark-theme');
localStorage.setItem('theme', 'dark-theme');
}
});
// 监听系统主题变化（可选，但推荐）
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
// 如果用户没有明确设置过主题，则跟随系统
if (!localStorage.getItem('theme')) {
if (event.matches) {
body.classList.add('dark-theme');
} else {
body.classList.remove('dark-theme');
}
}
});
});为什么推荐使用CSS变量实现暗黑模式？
说实话，在前端开发中，实现暗黑模式的方法有很多种，比如单独一套暗黑模式的CSS文件，或者利用CSS预处理器（如Sass、Less）的变量和混合器来生成两套样式。但我个人觉得，CSS变量（Custom Properties）无疑是目前最优雅、最灵活也最易于维护的方案。
首先，从维护性上讲，所有的颜色定义都集中在:root和.dark-theme这两个地方，一目了然。如果某个品牌色需要调整，你只需要改动一个变量的值，所有使用了这个变量的地方都会自动更新，这比维护两套独立的CSS文件要省心太多了。以前我遇到过那种亮色和暗色样式散落在不同文件里的项目，每次改颜色都像在玩“大家来找茬”，效率非常低。
其次是性能和用户体验。使用CSS变量切换主题，本质上只是增删一个CSS类名，浏览器只需要重新计算受影响的CSS变量值，然后重新渲染。这个过程非常轻量级，几乎不会引起页面的重绘和重排，所以切换起来非常流畅。相比之下，如果通过加载不同的CSS文件来切换，浏览器可能需要重新解析整个样式表，这在文件较大时可能会有明显的卡顿感。而且，CSS变量天生支持transition，可以轻松实现颜色切换时的平滑过渡效果，让用户体验更上一层楼。
再者，灵活性也是一个重要考量。CSS变量是动态的，你可以通过JavaScript在运行时修改它们的值，这为更复杂的交互和个性化主题提供了无限可能。比如，你甚至可以允许用户自定义某个元素的颜色，而不需要写额外的CSS规则。这种原生支持动态修改的特性，是预处理器变量无法比拟的。
如何确保暗黑模式的颜色对比度符合可访问性要求？
确保暗黑模式的颜色对比度符合可访问性要求，这绝对是一个不能忽视的重点，因为它直接关系到你的网站对所有用户的友好程度，尤其是视力受损的用户。我在这方面吃过不少亏，所以深知其重要性。
最核心的原则就是遵循Web内容可访问性指南（WCAG）2.1标准，其中对文字与背景的对比度有明确要求：常规文本至少达到4.5:1，大号文本（18pt或24px以上，或14pt/18.66px粗体）至少达到3:1。对于非文本内容，比如图标、图形元素，也有相应的对比度要求。
在实践中，我通常会这样做：
使用对比度检查工具：这不是偷懒，而是提高效率的必备。有很多在线工具（比如WebAIM Contrast Checker，或者浏览器开发者工具自带的颜色选择器）可以帮你实时检查颜色组合的对比度。在设计暗黑模式的配色方案时，我会反复用这些工具来验证每一对文字与背景色、图标与背景色。别凭感觉走，数据不会骗人。
选择合适的基色：暗黑模式并非简单地把所有颜色反转。理想的暗色背景通常不是纯黑（
#000000），而是略带灰度或深蓝色的背景（比如#1a1a1a,#212121），这样可以减少眼睛的疲劳感，同时更容易搭配出高对比度的文本颜色。同样，文本颜色也不要用纯白，稍微偏灰的白色（#f0f0f0,#e0e0e0）会更柔和。注意状态色和强调色：按钮、链接、警告信息等元素的颜色在暗黑模式下也需要重新考量。它们的对比度同样要达标，并且要保持其原有的语义。比如，一个红色的错误提示，在暗黑模式下可能需要调整为更亮、更饱和的红色，以确保它仍然醒目且易于识别。
测试不同屏幕和光照环境：我发现一个有趣的现象，在我的高分辨率显示器上看起来很棒的暗黑模式，到了老旧的笔记本屏幕上，或者在强光照射下，对比度可能就变得很差。所以，在不同设备、不同亮度环境下进行实际测试是非常必要的。
考虑色盲用户：除了对比度，还要考虑色盲用户。避免仅通过颜色来传达信息，应该结合图标、文字说明或下划线等其他视觉提示。例如，一个表示“成功”的绿色按钮，如果用户是红绿色盲，可能就无法区分，所以最好加上一个对勾图标。
总的来说，可访问性不是一个事后诸葛亮的问题，它应该在设计和开发暗黑模式的初期就被纳入考虑。
如何处理用户系统偏好（prefers-color-scheme）与手动切换的优先级？
这是一个非常实际的问题，因为用户可能在操作系统层面设置了偏好（比如macOS或Windows的暗色模式），同时你的网站又提供了手动切换主题的按钮。如何平衡这两者，让用户体验既智能又可控，确实需要一些策略。
我的经验是，优先尊重用户的显式选择，其次再考虑系统偏好。也就是说，如果用户手动点击了你的网站上的主题切换按钮，那么这个选择应该覆盖掉操作系统的设置。只有当用户没有明确选择时，网站才应该跟随操作系统的偏好。
具体实现上，可以这样操作：
初始化时检测系统偏好：当页面加载时，首先通过
window.matchMedia('(prefers-color-scheme: dark)')来检测用户当前的系统主题偏好。如果系统是暗色模式，并且用户之前没有在你的网站上明确设置过主题，那么就将网站设置为暗色模式。利用本地存储记录用户选择：每次用户通过你的主题切换按钮手动更改主题时，将这个选择（比如
dark或light）存储到localStorage中。这样，用户下次访问网站时，你可以首先检查localStorage。如果存在用户明确设置的主题，就直接应用它，忽略系统偏好。监听系统偏好变化（可选但推荐）：虽然用户手动设置会覆盖系统偏好，但如果用户在没有手动设置过网站主题的情况下，在操作系统层面更改了主题，你的网站也应该能及时响应。这可以通过监听
matchMedia的change事件来实现。当系统主题变化时，如果localStorage中没有明确的用户设置，就更新网站主题。提供重置或“跟随系统”的选项（高级）：有些用户可能希望网站能够“忘记”他们的手动选择，重新跟随系统主题。你可以提供一个额外的按钮，清除
localStorage中的主题设置，这样网站就会再次回到跟随系统偏好的状态。
举个例子，就像前面JavaScript代码里展示的逻辑：
- 页面加载，先看
localStorage里有没有theme这个键。 - 有？好，直接用
localStorage里的值来设置主题，这是用户的“明确意愿”。 - 没有？那再看
prefers-color-scheme，如果系统是暗色，就设为暗色；否则设为亮色。 - 用户点击切换按钮，更新
localStorage，并且立刻切换主题。 - 监听
prefers-color-scheme的change事件，如果localStorage里没有用户设置，就根据新的系统偏好来调整。
这种策略既保证了网站的智能化，能响应系统设置，又赋予了用户最终的控制权，让他们可以根据自己的喜好覆盖默认行为。这是一个非常人性化的设计，能显著提升用户满意度。
