先判断你到底要不要做暗色模式
暗色模式不是潮流装饰，它解决的是特定场景下的可用性问题。晚上关灯刷网页，白底刺眼，暗色界面看着舒服；长时间盯屏幕的人，暗色能减轻一部分视觉疲劳。如果你的站点有夜间用户，这个功能有价值。
反过来，如果你的站主要是白天办公场景使用，比如工具后台、数据看板、面向企业的产品页，暗色模式更多是锦上添花，投入产出比不高。别因为别家有就跟着做，做一半的暗色模式比不做更糟。
判断方法很朴素：看访问时段数据。如果晚上八点以后的访问占比有明显第二高峰，说明确有夜间用户；如果流量集中在白天九点到下午六点，暗色模式优先级可以往后放。
配色怎么定才不会糊
最常犯的错是把白底直接反成纯黑底、把黑字直接反成纯白字。结果是文字对比过强，长时间看反而累，而且纯黑背景上白色文字会有轻微的光晕感，看着发飘。
正确做法是降低对比度。背景用接近黑的深灰，比如十六进制里 15 到 20 那个亮度区间；正文用接近白的浅灰，不要用纯白。这样对比依然清楚，但眼睛舒服得多。
层级要用明暗来表达，不是用分割线硬切。深色界面里卡片比背景亮一点，hover 状态再亮一点，用户就知道哪里是可点的。这比加一堆边框干净。
强调色要重新选，不能直接复用亮色主题里的那个。同一个蓝色在深底上会显得发暗、发脏，需要提亮一到两档饱和度，或者换一个更亮的同色系。
最后一条：别在暗色模式里用大面积纯色块做背景分区。深色界面的层次感靠细微的亮度差，一旦有大色块就割裂了，看着廉价。
图片和图标怎么处理
图片不用全部重做，但白底图必须处理。白底截图、带白边的 logo、白底插画，直接放进暗色界面就是一块刺眼的白斑。做法有三种：换成透明底的版本、加一层暗色遮罩、或者给图片容器加圆角和内边距让白块不那么突兀。
图标如果本身就是深色的，在深背景上会消失。用 CSS 滤镜反转是一种偷懒解法，但对彩色图标会走形。稳妥的办法是暗色模式下换一套浅色图标，或者给图标容器加浅色底。
边框和分割线要重新定色。亮色主题里常用的浅灰边框，在暗色背景上要么看不见，要么太抢眼。一般用比背景亮一到两档的深灰。
切换与记忆
切换按钮要显眼但不碍事。放右上角或者设置菜单里都行，关键是图标要能一眼看懂，别用一个小到看不清的圆圈。
用户选过之后要记住。存本地，下次进来直接应用，别让用户每次都要点一遍。同时要给一个跟随系统的选项，系统切换时页面跟着变，这是现在平台的默认习惯。
首屏别闪白。如果暗色是用户上次选的，页面加载时先应用暗色再渲染内容，否则会有一瞬间的白屏闪烁，很刺眼。做法是在 head 里放一小段同步脚本，在样式加载前就把主题类加上。
前台实现方式
最简单的做法是 CSS 变量加一个根元素的类名。把颜色全部定义成变量，亮色一套值、暗色一套值，切换时只改类名，不用改任何组件样式。这套方案改动小、维护简单，适合已有站点改造。
另一种是媒体查询跟随系统，用 prefers-color-scheme。不用按钮，系统切了就跟着变。缺点是不能手动控制，用户想单独设也没办法。通常两种一起用：默认跟系统，手动切换后覆盖。
如果站点是 PHP 混编模板，注意把颜色从内联样式里抽出来。内联写死的颜色变量改不到，改造时最耗时的就是清理这些散落的硬编码色值。
常见的翻车点
只改了首页没改内页。首页暗了，点进文章页还是白的，体验割裂。做的时候把全站模板过一遍，别只做面子工程。
表单和弹窗忘了改。输入框白底黑字，在暗色背景下像一块贴上去的补丁。这类组件最容易漏，因为它们往往是独立的样式文件。
代码块和高亮配色没调。技术类文章的代码块在暗色下经常变成一团看不清的颜色，语法高亮要单独配一套暗色主题。
最后是可读性验收。改完自己晚上关灯看十分钟，能不能连续读下去，眼睛累不累。这个体感测试比任何工具都准，因为暗色模式的唯一标准就是看着舒服。
和品牌色、移动端的关系
如果站点有固定品牌色，暗色模式下的品牌色要单独调。亮色里那个橙或者蓝，放到深底上常常显得发闷，需要提高亮度或者饱和度才能还原原来的识别度。这件事不能偷懒直接复用，否则用户会觉得整个站的调性变了。
移动端要额外考虑系统状态栏。手机浏览器的顶栏颜色如果不跟着主题走，暗色页面顶上会出现一条突兀的浅色横条。加一行主题色的元信息，让状态栏跟页面背景一致，这个细节很小，但影响整体的完整感。
还有省电这件事。OLED 屏幕显示黑色时像素不发光，暗色模式确实能省电，深色背景对续航有一点点好处。这不是主要理由，但确实是加分项，尤其对夜间使用手机的用户。
最后提醒：暗色模式不要做成默认。大部分用户第一次访问时对站点没有预期，突然给一个暗色界面会让人怀疑是不是加载失败。默认跟系统，手动可切，这个才是稳妥的做法。
