深色模式：不是把颜色反过来

深色模式做得好，是另一种完整的设计；做得差，就是把浅色稿丢进反相滤镜。差别在几个关键决策上。

底色不要用纯黑

#000000 配白字对比过强，长时间看会累，而且 OLED 屏幕上纯黑区域和边框分不清。常用的是 #121212 到 #1A1A1A 这个区间，带一点点色相（偏蓝或偏暖）会更耐看。

层级靠"亮度递进"

浅色模式里，卡片靠阴影浮起来；深色模式里阴影几乎看不见，要用"更亮的底色"表示层级。比如背景 #121212，卡片 #1E1E1E，弹层 #2A2A2A。每上一层的亮度提高 5% 到 8%。

强调色要重新调

浅色模式里的深蓝 #1E5EFF，放到深色底上会显得发暗、看不清。需要提亮并适当降饱和，比如变成 #6E9BFF。红色、绿色同理，深色模式下的"成功绿"往往要更亮一点才不刺眼。

文字对比度

正文不要用纯白 #FFFFFF，用 #E0E0E0 左右，减少眩光。次要文字用 #A0A0A0，但要注意别低于 4.5:1 的对比度底线，否则读不清。

图片和插画

白底图片在深色页面上会像一块"发光的补丁"。处理方式有三种：给图片加一层半透明遮罩、用带透明通道的 PNG/SVG、或者干脆为深色模式准备一套素材。第三种成本最高但效果最好。

切换的实现

用 CSS 变量最省事：

:root { --bg: #ffffff; --text: #1a1a1a; }
[data-theme="dark"] { --bg: #121212; --text: #e0e0e0; }

切换时只改根节点的属性，组件样式自动跟着变。记得把用户的偏好存到 localStorage，并且首次加载时跟随系统设置（prefers-color-scheme）。

一个检查方法

在暗光环境下看一遍页面，再在强光下看一遍。好的深色模式在两种环境下都能读；差的会一边刺眼、一边糊成一片。