跳到主要内容

样式与 CSS · 颜色

深色模式

Dark Mode

也叫:暗黑模式、夜间模式、暗色主题、Dark Theme

用深色背景搭配浅色文字的界面配色方案,可以跟随系统设置自动切换,也可以让用户手动选择。

示例

详细解释

深色模式不是把颜色简单反转。常见做法:背景用深灰(如 #121212)而不是纯黑,文字用略微降低亮度的白;越靠上层的元素(卡片、弹窗)背景越亮,用亮度差代替阴影;主色调浅一点、饱和度低一点,避免刺眼。

实现上通常把颜色定义成 CSS 变量,深色模式下替换这组变量的值。跟随系统用媒体查询 prefers-color-scheme: dark;手动切换则在 html 标签上加 dark 类或 data-theme 属性,并把选择存到本地存储。Tailwind 用 dark: 前缀写深色样式。

容易遗漏的地方:图片和图表的配色、代码高亮主题、写死在组件里的颜色,以及刷新页面时先闪一下白屏。

开发者信息
术语 ID
style-dark-mode
DOM 选择器
没有 DOM 线索,这个概念不在页面上直接识别。
优先级
1 · 同一层有多条命中时,优先级高的胜出
版本
v1 · 更新于 2026/09/29