介绍了一个与深色模式相关的CSS属性：color-scheme。1.什么是配色方案？color-scheme[1]，顾名思义，就是一种“配色方案”，指系统中的“白天模式”和“夜间模式”。使用此属性可以轻松更改浏览器的默认配色方案，语法如下：color-scheme:normal;color-scheme:light;color-scheme:dark;color-scheme:lightdark;几个关键字如下：normal：表示该元素没有指定任何配色方案，因此应该使用浏览器的默认配色方案进行渲染。light：表示元素可以使用OSlight配色方案渲染。dark：表示元素可以使用操作系统的深色配色方案呈现。我们看一个简单的例子：
前端侦探
没有任何CSS，效果如下：如果系统颜色设置为深色模式，因为一切Didn不这样做，当然也不会改变，如下所示：现在将color-scheme属性添加到根元素。:root{color-scheme:lightdark}这里设置了两个值，表示可选的配色方案，由系统决定。虽然官方文档说是preferredchoice，但是实测两个订单没有区别。效果如下::是不是很神奇？普通页面就支持深色模式。也可以指定一个单独的值，与系统配色方案无关，例如：:root{color-scheme:dark}这样也可以在浅色模式下以深色主题渲染，效果如下：image-202207021722249042.color-通过上面的例子，scheme的作用范围似乎很强大。是否可以一键生成“黑暗”模式？其实color-scheme的范围很有限，包括表单控件、滚动条、CSS系统色值。1.表单元素我们先来看表单元素，我们以复选框为例。
假设现在我们需要制作一个深色模式主题，并手动将页面背景设置为黑色。body[dark]{background:#000}是不是觉得unchecked状态有点太刺眼了？此时可以使用color-scheme来渲染深色模式下的表单元素。身体[黑暗]{背景：#000;color-scheme:dark}这个是不是更柔和了？这里选择的主题色好像也变了。这是浏览器的默认设置，方便夜间浏览。如果你不想要这个选定的颜色，你可以使用accent-color来覆盖它。body{accent-color:#0175ff}有以下作用：accent-color可以改变表单元素的默认颜色。有兴趣的可以参考张新旭的文章CSSaccent-color属性介绍[2]。下面是其他表单元素的黑暗模式。2.Scrollbarcolor-scheme也可以改变滚动条的配色方案。这在windows下更明显。在默认的灯光模式下，滚动条是灰色和白色的。如果没有自定义滚动条（很多设计者觉得默认的滚动条挺好看的），设计了一个深色主题，可能会变成这样。滚动条看起来是不是很突兀？是否只能通过伪类自定义滚动条样式？既然有了配色方案，就不用那么麻烦了。可以直接这样设置：body[dark]{color-scheme:dark}这样是不是更和谐？其实MDN官网已经这么做了，上面只是暂时屏蔽了这个属性。3.CSS系统颜色系统颜色是指浏览器内置的一些颜色。比如为什么上一个按钮可以在深色模式下自动渲染？除了是表单元素之外，最根本的一点是这些表单元素的默认样式使用的是系统颜色。请注意下面的屏幕截图。可以看到，按钮的默认样式使用了一些系统颜色。按钮{/**/颜色：按钮文本；背景颜色：按钮面；border-color:buttonborder;}这里的buttontext、buttonface、buttonborder是系统颜色，会根据color-scheme自动适配深色模式。这些系统颜色不仅可以用在表单元素上，也可以用在普通元素上，比如这里的按钮文字颜色buttontext。div{background-color:buttontext;}这个颜色在深色模式下会自动变成白色，如下：如果你手动指定一些正常的颜色，那么它就会无效button{color:#333}所以，综上所述为上面提到，只有系统特定的样式和颜色可以受颜色方案的影响。完整的CSS系统颜色请参考官方MDN文档[3]，内容比较有限，而且颜色都是黑白等高饱和度的颜色，酌情使用。3.color-scheme和prefers-color-scheme相比color-scheme，大家可能更熟悉prefers-color-scheme，它用来检测用户是否将系统的主题色设置为亮色或暗色..day{背景：#eee;颜色：黑色;}.night{背景：#333；白颜色;}@media(prefers-color-scheme:dark){.day.dark-scheme{background:#333;白颜色;}.night.dark-scheme{背景：黑色；颜色：#ddd；那么，它与配色方案有何关系？例如。:root{color-scheme:dark;}@media(prefers-color-scheme:dark){body{color:red}}请问，light模式下body的颜色是什么？这是实际结果：只有当系统实际切换到暗模式时它才会变成红色。所以结论是color-scheme和prefers-color-scheme没有必然联系，不会干扰prefers-color-scheme的判断，而是互补的，color-scheme可以更好的处理一些of系统默认样式，prefers-color-scheme可以更方便的自定义其他常用样式。4.总结总结一下，为了更好的支持深色模式，可以在常规的深色模式中加入color-scheme作为备用方案，可以很好的适配浏览器的原生风格。:root{color-scheme:lightdark}这么小的知识点，你学会了吗？以下是对本文要点的总结。color-scheme是原生支持的配色方案，支持“白天模式”和“夜间模式”，可以方便的改变浏览器的默认配色方案。color-scheme支持的对象有表单控件、滚动条和CSS系统颜色。CSS系统颜色是指浏览器内置的颜色，是动态的。不过系统颜色比较有限，颜色都是黑白色等高饱和度的颜色，酌情使用。媒体查询prefers-color-scheme不会受color-scheme影响，只与系统设置有关。正常使用时，color-scheme和prefers-color-scheme需要相互配合，color-scheme适配native，prefers-color-scheme适配customization。然后说兼容性，其实对版本的要求还是挺高的。image-20220706152054928不过不影响我在项目中使用。原因很简单。这是渐进增强的特性。即使浏览器不支持，也不会影响页面。如果支持，体验会更好。所以，赶快使用吧，一行代码，无形中提升了视觉体验。参考文献[1]配色方案：https://developer.mozilla.org/zh-CN/docs/Web/CSS/color-scheme。[2]CSSaccent-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.
