欢送关注微信公众号：前端侦探
介绍一个和深色模式相干的CSS属性：color-scheme
一、什么是 color-scheme？
color-scheme顾名思义，即为“配色计划”，在零碎中指的是“白天模式”和“夜间模式”。应用这个属性能够轻松的更改浏览器的默认配色计划，语法如下
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
}这样在浅色模式下也能以深色主题来渲染，成果如下
二、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. 滚动条
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 文档 ，比拟无限，而且色彩都是那种黑白等高饱和度色彩，酌情应用
三、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
}这样一个小知识点，学到了吗？上面是本文要点总结
- color-scheme 是原生反对的配色计划，反对“白天模式”和“夜间模式”，能够轻松的更改浏览器的默认配色计划
- color-scheme 反对的对象有表单控件、滚动条和 CSS 零碎色彩
- CSS 零碎色彩指的是浏览器内置的色彩，这些色彩是动静的
- 然而零碎色彩比拟无限，而且色彩都是那种黑白等高饱和度色彩，酌情应用
- 媒体查问 prefers-color-scheme 不会受到 color-scheme 的影响，只和零碎设置无关
- 平时应用中 color-scheme 和 prefers-color-scheme 须要相互配合， color-scheme 适配原生，prefers-color-scheme 适配自定义
而后提一下兼容性，其实对版本要求还挺高的
然而，这并不影响我在我的项目中应用。起因很简略，这算得上是渐进加强的属性，即便浏览器不反对，也不会对页面造成什么影响，如果反对，体验会更好。所以，连忙应用起来吧，就一行代码的事，无形之中提醒了视觉体验。
最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤
欢送关注微信公众号：前端侦探
发表回复