设计一个让人舒服的暗色模式，不只是把颜色反过来

很多人以为暗色模式就是黑底白字，其实差远了。一个舒服的暗色模式需要注意很多细节。

1. 别用纯黑

纯黑（#000000）背景在 OLED 屏幕上省电，但会让文字产生"光晕"感，眼睛更容易累。更推荐用深灰，比如 #0d1117（GitHub 同款），既有暗色的氛围，又不刺眼。

2. 降低文字对比度

亮色模式下正文用 #1f2328 这种接近纯黑的颜色没问题，但暗色模式下如果文字用纯白，对比度会高到刺眼。把正文降到 #e6edf3，次要信息 #9aa4b0，层级感立刻就出来了。

3. 阴影要加深

亮色模式下阴影很淡就有层次感，但暗色模式下阴影几乎看不见，需要：

• 加深阴影透明度
• 用边框（border）来补充层级分隔
• 适当提高表面颜色的亮度来体现"浮起"

4. CSS 变量是最佳载体

:root { --bg: #f7f8fa; --text: #1f2328; }
[data-theme="dark"] { --bg: #0d1117; --text: #e6edf3; }

所有组件只引用变量，切换主题只需要改一个属性，连 class 都不用换。

5. 记住用户的选择

首次访问跟随系统 prefers-color-scheme，用户手动切换后存进 localStorage，下次直接用用户的选择——这是目前体验最好的方案。