← 全部文章

教程

用 CSS 构建通用深色模式

17 5月 2026 · 作者 JustZix Team

大多数网站仍然提供刺眼的白色背景,而且并非每一个都提供深色主题。有了 JustZix,你可以给任何 URL 附加一条 CSS 规则,强制一个跟着你走遍各处的深色模式。下面是我实际使用的配方。

最快的深色模式:反转页面

最快的诀窍是反转整个文档,并把色相旋转回来,让颜色大致保持正确。照片和视频也会被反转,所以我们把它们再反转回去。

html {
  filter: invert(1) hue-rotate(180deg);
  background: #fff;
}
img, video, picture, canvas, iframe, svg,
[style*="background-image"] {
  filter: invert(1) hue-rotate(180deg);
}

这是一行代码的胜利。它并不完美——阴影看起来怪怪的,品牌色会偏移——但对一次快速阅读来说,它无可匹敌。建立一条 JustZix CSS 规则,匹配到你想要的域名,粘贴,完成。

更干净的原生深色模式

对于你每天访问的网站,一个手工调校的主题胜过反转。不用反转,你直接重绘背景和文本。这能让图片和强调色保持原样。

:root {
  --bg: #16181c;
  --bg-soft: #1f232a;
  --text: #d6d9de;
}
html, body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}
header, footer, nav, aside, section, article, main,
.card, .panel, .box {
  background-color: var(--bg-soft) !important;
  color: var(--text) !important;
}
a { color: #6ea8fe !important; }

这些选择器故意写得很宽泛。你很少需要精确——大多数布局只用一小撮结构性标签和通用类名。把变量调一次,整个页面就会跟着变。

修复残留的明亮部分

基础主题之后,有几个元素仍然是白的:输入框、代码块、表格。用一条规则把它们一起扫掉。

input, textarea, select, button,
pre, code, table, th, td {
  background-color: #20242b !important;
  color: #d6d9de !important;
  border-color: #2f343d !important;
}
::placeholder { color: #6b7280 !important; }
::selection { background: #3b4252; color: #fff; }

只在夜间

如果你只想在日落后启用深色模式,就把规则包在媒体查询里,让它遵循你的操作系统计划。

@media (prefers-color-scheme: dark) {
  html, body { background-color: #16181c !important; color: #d6d9de !important; }
}

省时的小技巧

• 始终加上 !important——网站样式表在你的之后加载,会覆盖普通规则。
• 从反转诀窍开始,再为你最常用的五个网站升级到原生主题。
• 保留一个共享的 :root 变量块,让每个网站都用同一套调色板。
• 测试滚动条和选区颜色——它们很容易被忘记,会破坏氛围。

想要更多起点?浏览我们的现成示例,或阅读关于自定义强调色的配套文章。新来的?下载 JustZix,在一分钟内粘贴你的第一条规则。