CSS Color-Scheme 和深色模式

开发 前端
color-scheme顾名思义,即为“配色方案”,在系统中指的是“白天模式”和“夜间模式”。使用这个属性可以轻松的更改浏览器的默认配色方案。

介绍一个和深色模式相关的CSS属性:color-scheme。

一、什么是 color-scheme?

color-scheme[1]顾名思义,即为“配色方案”,在系统中指的是“白天模式”和“夜间模式”。使用这个属性可以轻松的更改浏览器的默认配色方案,语法如下:

color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;

几个关键词如下:

normal:表示元素未指定任何配色方案,因此应使用浏览器的默认配色方案呈现。

light:表示可以使用操作系统亮色配色方案渲染元素。

dark:表示可以使用操作系统深色配色方案渲染元素。

下面来看一个简单的例子:

<h2>前端侦探</h2>
<button>关注我</button>

在无任何CSS的情况下,效果如下:

图片

如果将系统配色设置为深色模式,由于什么都没有做,当然也不会有什么变化,如下:

图片

现在在根元素上添加color-scheme属性。

:root{
color-scheme: light dark
}

这里设置两个值,表示可选的配色方案,由系统来决定。

官方文档上虽然说是优先选择,实测两种顺序没有区别。

效果如下:

图片

是不是非常神奇?平平无奇的页面马上就支持深色模式了。

还可以指定单个值,这样就和系统配色无关了,比如:

:root{
color-scheme: dark
}

这样在浅色模式下也能以深色主题来渲染,效果如下:

图片image-20220702172224904

二、color-scheme 的作用范围

通过上面的例子看着好像很强大,是不是可以一键生成“深色”模式了?其实不然,​​color-scheme​​ 的作用范围很有限,包括表单控件、滚动条和 CSS 系统颜色的使用值。

1、表单元素

先看表单元素,就拿 checkbox来说吧。

<input type="checkbox">

图片

假设现在我们需要做一个深色模式的主题,手动将页面背景设置为黑色。

body[dark]{
background: #000
}

图片

是不是感觉到未勾选状态有点太过刺眼了呢?

这时,就可以用到color-scheme了,可以将表单元素以深色模式渲染。

body[dark]{
background: #000;
color-scheme: dark
}

图片

这样是不是柔和多了?这里选中的主题色貌似也发生了变换,这个是浏览器为了方便夜间浏览默认设置的,如果你不希望这个选中颜色,可以用accent-color来覆盖。

body{
accent-color: #0175ff
}

效果如下:

图片

accent-color可以更改表单元素的默认颜色,有兴趣的可以参考张鑫旭的这篇文章 CSS accent-color属性简介[2]。

下面是其他表单元素的深色模式。

图片

2、滚动条

color-scheme也能改变滚动条的配色模式。这个在 windows 下比较明显,默认浅色模式下,滚动条是这种灰白色的。

图片

如果在没有自定义滚动条的情况下(很多设计觉得默认滚动条挺好看的),设计了一套深色主题,可能就变成了这样。

图片

滚动条是不是显得非常突兀?是不是只能通过伪类自定义滚动条样式了呢?现在有了color-scheme就不需要这么麻烦了,直接设置如下:

body[dark]{
color-scheme: dark
}

这样是不是和谐多了?

图片

其实 MDN 官网已经这么做了,上面只是临时屏蔽了这一属性。

图片

3、CSS 系统颜色

系统颜色指的是浏览器内置的一些颜色。比如前面的button,为什么能自动渲染成深色模式呢?除了因为它是表单元素外,最根本的一点是这些表单元素的默认样式上使用了系统颜色。注意看下面这个截图。

图片

可以看到,button的默认样式里,使用到了一些系统颜色。

button{
/**/
color: buttontext;
background-color: buttonface;
border-color: buttonborder;
}

这里的buttontext、buttonface、buttonborder​就是系统颜色了,它会根据color-scheme自动适应深色模式。

图片

这些系统颜色不仅仅可以用在表单元素上,也能用在普通元素上,比如这里取按钮文本颜色buttontext。

div{
background-color: buttontext;
}

这个颜色会在深色模式下自动变成白色,如下:

图片

如果手动的指定了一些正常颜色,那么也就失效了

button{
color: #333
}

图片

所以,综合上面所述,只有系统相关的样式和颜色才可以受到color-scheme的影响。

完整的 CSS 系统颜色可以参考官方 MDN 文档[3] ,比较有限,而且颜色都是那种黑白等高饱和度颜色,酌情使用。

三、color-scheme 和 prefers-color-scheme

相比color-scheme​,大家可能更熟悉prefers-color-scheme,它用于检测用户是否有将系统的主题色设置为亮色或者暗色。

.day   { background: #eee; color: black; }
.night { background: #333; color: white; }
@media (prefers-color-scheme: dark) {
.day.dark-scheme { background: #333; color: white; }
.night.dark-scheme { background: black; color: #ddd; }
}

那么,它和color-scheme有什么联系呢?举个例子。

:root{
color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
body {
color: red
}
}

请问,在浅色模式下,body 的颜色是什么?

下面来看实际结果:

图片

只有当系统真正切换到深色模式,才会变成红色。

图片

所以结论是,color-scheme​ 和 prefers-color-scheme​没有必然联系,并不会干涉prefers-color-scheme​的判断,但是是相辅相成的,color-scheme​ 可以更好的处理系统默认的一些样式,而 prefers-color-scheme可以更方便的自定义其他普通样式。

四、总结一下

综上所述,为了更好的支持深色模式,可以在常规的深色模式下添加color-scheme作为兜底方案,可以很好的适配浏览器原生样式。

:root{
color-scheme: light dark
}

这样一个小知识点,学到了吗?下面是本文要点总结。

  1. color-scheme 是原生支持的配色方案,支持“白天模式”和“夜间模式”,可以轻松地更改浏览器的默认配色方案。
  2. color-scheme 支持的对象有表单控件滚动条CSS 系统颜色。
  3. CSS 系统颜色指的是浏览器内置的颜色,这些颜色是动态的。
  4. 但是系统颜色比较有限,而且颜色都是那种黑白等高饱和度颜色,酌情使用。
  5. 媒体查询 prefers-color-scheme 不会受到 color-scheme 的影响,只和系统设置有关。
  6. 平时使用中 color-scheme 和 prefers-color-scheme 需要相互配合, color-scheme 适配原生,prefers-color-scheme 适配自定义。

然后提一下兼容性,其实对版本要求还挺高的。

图片image-20220706152054928

但是,这并不影响我在项目中使用。原因很简单,这算得上是渐进增强的属性,即使浏览器不支持,也不会对页面造成什么影响,如果支持,体验会更好。所以,赶紧使用起来吧,就一行代码的事,无形之中提升了视觉体验。

参考资料

​[1]color-scheme: https://developer.mozilla.org/zh-CN/docs/Web/CSS/color-scheme。

[2]CSS accent-color属性简介: https://www.zhangxinxu.com/wordpress/2022/03/css-accent-color/。

[3]MDN 文档: https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value#%E7%B3%BB%E7%BB%9F%E9%A2%9C%E8%89%B2​。

责任编辑:姜华 来源: 前端侦探
相关推荐

2021-11-04 10:29:01

CSS前端

2023-07-27 10:42:45

必应聊天微软

2019-05-29 10:16:47

iOS应用系统

2020-12-07 13:23:07

LibreOffice开源

2020-04-13 15:05:10

Ubuntu深色模式Ubuntu 20.0

2022-03-25 09:45:40

GNOMEGNOME 42

2020-03-23 11:43:43

微信iOS 7.0.12深色模式

2023-10-10 09:00:00

CSSJavaScript

2021-11-22 09:56:13

FedoraLinux

2022-09-16 07:33:52

浏览器深色模式Firefox

2023-06-26 09:16:34

CSScolor-mix

2019-04-16 09:47:42

iOS应用系统

2022-11-08 11:39:34

Web浏览器深色模式

2021-04-02 17:05:43

Chrome浏览器Incognito

2020-04-07 16:25:39

微信深色模式黑色模式

2021-12-08 11:21:37

Windows 11记事本微软

2019-12-19 15:09:19

微信深色模式消息引用

2021-09-02 00:13:41

Windows 11Windows微软

2019-06-18 09:28:34

iOS 13手机黑暗模式

2021-12-09 09:37:17

淘宝iOS版深色模式深夜党
点赞
收藏

51CTO技术栈公众号