几乎不使用 CSS 的暗色模式

|

Feep！现在有了暗色模式主题！网站的样式表是在浏览器默认样式表的基础上覆盖的一套相当简约的样式表，因此添加这种支持实际上非常简单，不过也有一些复杂的问题。

主题会根据系统设置进行设置；如果你想知道你看不到的主题是什么样子，可以在浏览器的开发工具中来回切换。

启用暗色模式

实际上，你可以不使用 CSS 设置暗色模式，只需在 HTML 的 <head> 中添加 <meta> 元素即可：

<meta name="color-scheme" content="light dark">

不过，你也可以用 CSS 来做：

html {color-scheme: light dark}

有趣的是，您可以在任意元素上设置颜色模式，并指定只使用 light或dark来强制使用特定模式。我想，如果你正在逐步为网站添加深色模式支持，而某个组件的样式尚未迁移，那么这可能会很有用；你可以设置 color-scheme：light，让它变得丑陋但可用。

无论如何，如果你还没有进行大量的自定义，这实际上已经能让你实现大部分的暗色主题：它会启用浏览器的本地暗色模式样式表，自动调整背景、文本、控件等的默认颜色。如果你没有自定义过任何颜色，这可能就是你所需要的全部。

选择你的颜色

不过，没有自定义颜色的网站确实很少见，所以你可能至少需要做一点调整。即使我采用了极简美学，我仍然在结果页面上使用了一些 “品牌 ”颜色，我需要将它们调整为暗色模式，这样它们就能更好地与深色背景融合在一起。

当然，这也带来了一个问题，那就是该把颜色改成什么。我不是平面设计师，所以不知道自己在做什么。我试着读了几篇 Atmos 和 UX Planet 的文章，它们对我有点帮助，但最后我还是在颜色上做了些手脚，并刷新了页面，直到我觉得看起来还不错。在尝试调整色彩时，我使用了 OKLCH 色彩空间和 oklch.com，理论上说，在感知线性度更好的色彩空间中可能更容易达到我想要的效果，但实际上我不知道这在实践中有多大区别。

我还对自动生成的调色板进行了一些研究，但很快就认为这对于我的实际需要来说太过复杂了。

请使用 CSS

现在你有了颜色，下一步就是使用它们；有几种方法可以做到这一点，在方便性和兼容性之间有各种权衡。(另外，如果你在多个地方使用这些颜色，你应该使用 CSS 变量，而不是将它们硬编码到每条规则中，但我的样式表太小了，所以我就没费心）。

light-dark()函数提供了一种方便的语法，可以同时指定两种颜色，不过它只适用于 2024 年 5 月以后的浏览器：

.result a {color: light-dark(#0074D9, #3897FF)}
.result a:visited {color: light-dark(#B10DC9, #B44CC6)}

要制作柔和的颜色，可以使用 CSS 系统颜色和混色功能（自 2023 年起跨浏览器可用）将前景色与背景色结合起来。这也有助于提高可访问性：如果用户已在浏览器中配置了默认颜色，那么通过混合创建额外的颜色将保留用户的偏好，而直接设置颜色则会产生更刺眼的外观。

.result {color: color-mix(in srgb, CanvasText, Canvas 20%)}

最后，为暗色模式单独设置颜色的最兼容方法是使用 prefers-color-scheme 媒体查询来覆盖它们，不过这样就很难在样式表中同时看到两种颜色：

.result a {color: #0074D9}
.result a:visited {color: #B10DC9}
@media (prefers-color-scheme: dark) {
	.result a {color: #3897FF}
	.result a:visited {color: #B44CC6}
}

一个奇怪的小窍门

最后，博客上有一些图表的颜色是硬编码嵌入图片中的。我本可以尝试修改这些图片的生成方式，根据主题来呈现不同的颜色，但使用 CSS 滤镜来反转亮度并保持相同色调更为简单。我还暂时对代码块进行了同样的修改；后来我觉得，比起我计划使用的暗色模式代码主题，我更喜欢这种效果，所以就保留了下来。

@media (prefers-color-scheme: dark) {
	.mermaid>svg, .dpic-svg>svg, pre code.hljs {filter: invert(100%) hue-rotate(180deg)}
}

实际上，你可以用这种方法制作整个暗色模式，不过效果不会像手动调整颜色那么好，而且很难根据需要逐个覆盖。

结论

这比我上一次尝试制作暗色模式要容易得多（我承认这已经是好几年前的事了），当时我试图把所有需要的东西都重新设计成合适的样式，结果半途而废。依靠浏览器内置的暗色模式样式表，只需添加十几行 CSS 就能让一切看起来正确无误。

你也许感兴趣的：

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注