乐趣区

关于前端:CSS-colorscheme-和夜间模式

jiezi

欢送关注微信公众号：前端侦探

介绍一个和深色模式相干的 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}

这样一个小知识点，学到了吗？上面是本文要点总结

  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 适配自定义

而后提一下兼容性，其实对版本要求还挺高的

然而，这并不影响我在我的项目中应用。起因很简略，这算得上是渐进加强的属性，即便浏览器不反对，也不会对页面造成什么影响，如果反对，体验会更好。所以，连忙应用起来吧，就一行代码的事，无形之中提醒了视觉体验。

最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

欢送关注微信公众号：前端侦探

退出移动版