CSS Color-Scheme 和深色模式
介紹一個和深色模式相關(guān)的CSS屬性：color-scheme。
一、什么是 color-scheme？
color-scheme[1]顧名思義，即為“配色方案”，在系統(tǒng)中指的是“白天模式”和“夜間模式”。使用這個屬性可以輕松的更改瀏覽器的默認(rèn)配色方案，語法如下:
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
幾個關(guān)鍵詞如下:
normal：表示元素未指定任何配色方案，因此應(yīng)使用瀏覽器的默認(rèn)配色方案呈現(xiàn)。
light：表示可以使用操作系統(tǒng)亮色配色方案渲染元素。
dark：表示可以使用操作系統(tǒng)深色配色方案渲染元素。
下面來看一個簡單的例子：
<h2>前端偵探</h2>
<button>關(guān)注我</button>
在無任何CSS的情況下，效果如下：
如果將系統(tǒng)配色設(shè)置為深色模式，由于什么都沒有做，當(dāng)然也不會有什么變化，如下：
現(xiàn)在在根元素上添加color-scheme屬性。
:root{
color-scheme: light dark
}
這里設(shè)置兩個值，表示可選的配色方案，由系統(tǒng)來決定。
官方文檔上雖然說是優(yōu)先選擇，實測兩種順序沒有區(qū)別。
效果如下：
：
是不是非常神奇？平平無奇的頁面馬上就支持深色模式了。
還可以指定單個值，這樣就和系統(tǒng)配色無關(guān)了，比如：
:root{
color-scheme: dark
}
這樣在淺色模式下也能以深色主題來渲染，效果如下：
image-20220702172224904
二、color-scheme 的作用范圍
通過上面的例子看著好像很強(qiáng)大，是不是可以一鍵生成“深色”模式了？其實不然，??color-scheme?? 的作用范圍很有限，包括表單控件、滾動條和 CSS 系統(tǒng)顏色的使用值。
1、表單元素
先看表單元素，就拿 checkbox來說吧。
<input type="checkbox">
假設(shè)現(xiàn)在我們需要做一個深色模式的主題，手動將頁面背景設(shè)置為黑色。
body[dark]{
background: #000
}
是不是感覺到未勾選狀態(tài)有點太過刺眼了呢？
這時，就可以用到color-scheme了，可以將表單元素以深色模式渲染。
body[dark]{
background: #000;
color-scheme: dark
}
這樣是不是柔和多了？這里選中的主題色貌似也發(fā)生了變換，這個是瀏覽器為了方便夜間瀏覽默認(rèn)設(shè)置的，如果你不希望這個選中顏色，可以用accent-color來覆蓋。
body{
accent-color: #0175ff
}
效果如下：
accent-color可以更改表單元素的默認(rèn)顏色，有興趣的可以參考張鑫旭的這篇文章 CSS accent-color屬性簡介[2]。
下面是其他表單元素的深色模式。
2、滾動條
color-scheme也能改變滾動條的配色模式。這個在 windows 下比較明顯，默認(rèn)淺色模式下，滾動條是這種灰白色的。
如果在沒有自定義滾動條的情況下（很多設(shè)計覺得默認(rèn)滾動條挺好看的），設(shè)計了一套深色主題，可能就變成了這樣。
滾動條是不是顯得非常突兀？是不是只能通過偽類自定義滾動條樣式了呢？現(xiàn)在有了color-scheme就不需要這么麻煩了，直接設(shè)置如下：
body[dark]{
color-scheme: dark
}
這樣是不是和諧多了？
其實 MDN 官網(wǎng)已經(jīng)這么做了，上面只是臨時屏蔽了這一屬性。
3、CSS 系統(tǒng)顏色
系統(tǒng)顏色指的是瀏覽器內(nèi)置的一些顏色。比如前面的button，為什么能自動渲染成深色模式呢？除了因為它是表單元素外，最根本的一點是這些表單元素的默認(rèn)樣式上使用了系統(tǒng)顏色。注意看下面這個截圖。
可以看到，button的默認(rèn)樣式里，使用到了一些系統(tǒng)顏色。
button{
/**/
color: buttontext;
background-color: buttonface;
border-color: buttonborder;
}
這里的buttontext、buttonface、buttonborder?就是系統(tǒng)顏色了，它會根據(jù)color-scheme自動適應(yīng)深色模式。
這些系統(tǒng)顏色不僅僅可以用在表單元素上，也能用在普通元素上，比如這里取按鈕文本顏色buttontext。
div{
background-color: buttontext;
}
這個顏色會在深色模式下自動變成白色，如下：
如果手動的指定了一些正常顏色，那么也就失效了
button{
color: #333
}
所以，綜合上面所述，只有系統(tǒng)相關(guān)的樣式和顏色才可以受到color-scheme的影響。
完整的 CSS 系統(tǒng)顏色可以參考官方 MDN 文檔[3] ，比較有限，而且顏色都是那種黑白等高飽和度顏色，酌情使用。
三、color-scheme 和 prefers-color-scheme
相比color-scheme?，大家可能更熟悉prefers-color-scheme，它用于檢測用戶是否有將系統(tǒng)的主題色設(shè)置為亮色或者暗色。
.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有什么聯(lián)系呢？舉個例子。
:root{
color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
body {
color: red
}
}
請問，在淺色模式下，body 的顏色是什么？
下面來看實際結(jié)果：
只有當(dāng)系統(tǒng)真正切換到深色模式，才會變成紅色。
所以結(jié)論是，color-scheme? 和 prefers-color-scheme?沒有必然聯(lián)系，并不會干涉prefers-color-scheme?的判斷，但是是相輔相成的，color-scheme? 可以更好的處理系統(tǒng)默認(rèn)的一些樣式，而 prefers-color-scheme可以更方便的自定義其他普通樣式。
四、總結(jié)一下
綜上所述，為了更好的支持深色模式，可以在常規(guī)的深色模式下添加color-scheme作為兜底方案，可以很好的適配瀏覽器原生樣式。
:root{
color-scheme: light dark
}
這樣一個小知識點，學(xué)到了嗎？下面是本文要點總結(jié)。
- color-scheme 是原生支持的配色方案，支持“白天模式”和“夜間模式”，可以輕松地更改瀏覽器的默認(rèn)配色方案。
- color-scheme 支持的對象有表單控件、滾動條和CSS 系統(tǒng)顏色。
- CSS 系統(tǒng)顏色指的是瀏覽器內(nèi)置的顏色，這些顏色是動態(tài)的。
- 但是系統(tǒng)顏色比較有限，而且顏色都是那種黑白等高飽和度顏色，酌情使用。
- 媒體查詢 prefers-color-scheme 不會受到 color-scheme 的影響，只和系統(tǒng)設(shè)置有關(guān)。
- 平時使用中 color-scheme 和 prefers-color-scheme 需要相互配合， color-scheme 適配原生，prefers-color-scheme 適配自定義。
然后提一下兼容性，其實對版本要求還挺高的。
image-20220706152054928
但是，這并不影響我在項目中使用。原因很簡單，這算得上是漸進(jìn)增強(qiáng)的屬性，即使瀏覽器不支持，也不會對頁面造成什么影響，如果支持，體驗會更好。所以，趕緊使用起來吧，就一行代碼的事，無形之中提升了視覺體驗。
參考資料
?[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?。
