使用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里没有用户设置，就根据新的系统偏好来调整。
这种策略既保证了网站的智能化，能响应系统设置，又赋予了用户最终的控制权，让他们可以根据自己的喜好覆盖默认行为。这是一个非常人性化的设计，能显著提升用户满意度。
