深色模式 · Dark Mode
英文:dark mode(按单词直读)
界面与交互难度:进阶 ★★
🗣️一句话大白话
网站的「夜间皮肤」:深底浅字。正确实现方式是「颜色全走设计变量」,切换时整套换——先定变量的项目,加深色模式只要一小时。
🎬真实场景
用户说「加个深色模式」,AI 把所有色值手写反转——浅色模式坏了。正确做法:色值定义成变量(--bg、--text),深浅两套值,一键切换。
📮你可以这样说
「「支持深色模式:所有颜色用 CSS 变量定义,浅/深两套值,默认跟随系统偏好,并提供手动切换开关(记住用户选择)。」」
⚠️边界与常见误解
- ▸深色模式不是「颜色反转」:图片、阴影、对比度都要单独调
- ▸跟随系统 + 手动覆盖两者不冲突,都要有
- ▸上线前两套模式都过一遍:深色下的浅色图片会晃眼