现在很多网站和应用都加上了暗黑模式，晚上刷手机看电脑的时候，眼睛确实舒服不少。如果你也想给自己的网站加上这个功能，可能会觉得有点复杂——要改颜色、要切换、要保存用户偏好……别担心，咱们今天就用大白话，把这件事从头到尾、系统化地捋清楚，保证你能听懂，也能照着做。
在写代码之前，得先想清楚几个事儿，这能避免你后面返工。
1. 核心目标是什么？
首要目标是保护视力、减少疲劳，特别是夜间使用场景。其次是省电（对OLED屏幕设备）。最后才是跟风审美。别搞反了。
2. “暗黑”不等于“纯黑”
很多新手一上来就把背景弄成#000000（纯黑），文字弄成#FFFFFF（纯白）。结果对比度极高，看久了反而刺眼。好的暗黑模式用的是深灰色系，比如#121212或#1E1E1E作为背景，文字用#E0E0E0这种浅灰，对比度适中，更柔和。
3. 不只是背景和文字
按钮、边框、输入框、卡片阴影、图标……网站上的每一个有颜色的元素，你都得考虑它在亮色和暗色模式下分别应该是什么颜色。特别是：
语义化颜色：成功（绿色）、警告（黄色）、错误（红色）、信息（蓝色）这些颜色，在暗色背景下需要调整饱和度和亮度，以保证可读性和视觉权重一致。
图片和视频：有些图片在暗色背景下会显得太扎眼，可能需要加个深色半透明遮罩，或者提供暗色版本的图片。
4. 如何切换？
手动开关：在网站显眼位置（如页眉或侧边栏）放个太阳/月亮图标按钮。
跟随系统：检测用户设备的系统主题设置，自动同步。这是现在最推荐的方式。
想清楚这些，画个简单的草图，把主要元素的两种颜色标出来，心里就有谱了。
这是实现暗黑模式最核心、最优雅的技术手段。
1. 用CSS变量定义配色方案
以前我们写颜色直接写死，比如color: black;。现在我们要学会“定义变量”。
你看，我们给每种颜色起了个名字（变量），比如--color-background代表背景色。在亮色模式下它值是白色，在暗色模式下它值是深灰。这样，我们后面所有用到颜色的地方，都不写具体色值，而是用这个变量。
2. 使用变量
定义好了变量，怎么用呢？很简单。
这样一来，只要我们把网页<html>或<body>标签的data-theme属性改成"dark"，所有使用了这些变量的元素颜色就会自动变成暗色方案。切换主题就是改一个属性的事。
3. 检测系统偏好
怎么自动跟随系统呢？用CSS媒体查询。
这段代码意思是：如果用户系统设置了暗色模式，并且我们没有用data-theme="light"强行指定亮色，那么就自动应用暗色变量。
CSS负责定义和展示，JavaScript负责交互和记忆。
1. 创建切换按钮
在HTML里放一个按钮：
用CSS控制，默认只显示太阳图标（亮色模式），暗色模式时通过CSS切换显示月亮图标。
2. 用JavaScript控制切换
初始化：页面一打开，就检查用户之前是否手动选过主题（查本地存储），没选过就检查系统设置，然后应用对应的主题。
切换：用户点击按钮，就在亮色和暗色之间来回切换。
记忆：把用户的选择存到浏览器本地（localStorage），下次用户再访问，还是他喜欢的那个主题。
3. 处理系统主题变化
如果用户在我们网站上选了“跟随系统”，之后又在操作系统里切换了亮暗模式，我们网站也应该跟着变。这需要监听系统变化：
第四部分：魔鬼在细节里——进阶优化点
做到上面三步，一个可用的暗黑模式就有了。但要做得专业、体验好，还得抠细节。
1. 处理图片和媒体
背景图：深色背景下，太亮的背景图很突兀。可以用CSS滤镜或加半透明深色层。
图标：最好使用SVG图标，并用CSS变量控制其填充色（fill: var(--color-text)），这样它们就能随主题变色。
2. 过渡动画
颜色切换时，如果直接“闪”一下，很生硬。我们在CSS里给颜色相关的属性都加上过渡效果。
3. 避免“白色闪烁”（FOUT）
如果用户系统是暗色，但你的JS在页面加载后才应用暗色主题，用户会先看到一瞬间的亮色页面（闪白屏）。解决办法：
在HTML的<head>里内联一小段关键的JS或CSS，尽快确定主题并应用。或者，
给<html>标签先设置一个默认的暗色类名，等JS加载后再精确调整。
4. 测试，测试，再测试
不同设备/浏览器：在手机、平板、电脑上都看看。
极端情况：关闭JavaScript，看网站是否还能基本可用（至少样式正常）。
对比度测试：用无障碍检测工具检查两种模式下的颜色对比度是否都达到WCAG标准（至少AA级），确保色弱、视力不佳的用户也能看清。
一个系统化的暗黑模式实现流程就是：
规划：想清楚颜色、组件、切换方式。
定义：用CSS变量统一定义两套配色。
应用：所有元素都使用CSS变量。
切换：用JavaScript实现按钮点击切换、跟随系统、记忆选择。
优化：处理图片、添加过渡、解决闪屏、全面测试。
最后几个大实话提醒：
别追求一步到位：可以先给主要页面和核心组件加上，再逐步覆盖全站。
一致性比炫技重要：确保同一个颜色变量在整个网站代表相同的含义。
用户选择权第一：一定要提供简单明了的开关，并且尊重用户的每一次选择（保存好）。跟随系统是默认好选择，但手动开关必须存在。
加上暗黑模式，不仅仅是一个功能，更是一种对用户使用场景的细致关怀。花点时间把它做好，你的用户一定能感受到这份用心。慢慢来，从最核心的页面开始实践，你很快就能掌握这套系统化的方法。
联系电话