样式与 CSS · 颜色
深色模式
Dark Mode
也叫:暗黑模式、夜间模式、暗色主题、Dark Theme
用深色背景搭配浅色文字的界面配色方案,可以跟随系统设置自动切换,也可以让用户手动选择。
详细解释
深色模式不是把颜色简单反转。常见做法:背景用深灰(如 #121212)而不是纯黑,文字用略微降低亮度的白;越靠上层的元素(卡片、弹窗)背景越亮,用亮度差代替阴影;主色调浅一点、饱和度低一点,避免刺眼。
实现上通常把颜色定义成 CSS 变量,深色模式下替换这组变量的值。跟随系统用媒体查询 prefers-color-scheme: dark;手动切换则在 html 标签上加 dark 类或 data-theme 属性,并把选择存到本地存储。Tailwind 用 dark: 前缀写深色样式。
容易遗漏的地方:图片和图表的配色、代码高亮主题、写死在组件里的颜色,以及刷新页面时先闪一下白屏。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
style-dark-mode- DOM 选择器
- 没有 DOM 线索,这个概念不在页面上直接识别。
- 优先级
- 1 · 同一层有多条命中时,优先级高的胜出
- 版本
- v1 · 更新于 2026/09/29