手機(jī)網(wǎng)頁(yè)自適應(yīng)深色模式適配
近幾年，各個(gè)主流操作系統(tǒng)都逐漸開端注重深色方式，從而改善用戶在環(huán)境光亮低時(shí)的閱讀體驗(yàn)。很多手機(jī)APP應(yīng)用都已經(jīng)對(duì)深色模式進(jìn)行了支持，常用的手機(jī)應(yīng)用也在 App Store 的政策壓力下對(duì)深色模式進(jìn)行了適配。那么，對(duì)于手機(jī)網(wǎng)站來(lái)說(shuō)，是否也能支持自適應(yīng)淺色模式和深色模式，本文將介紹一下手機(jī)網(wǎng)頁(yè)如何開發(fā)自適應(yīng)深色模式適配。
既然有了系統(tǒng)層級(jí)的適配，手機(jī)網(wǎng)站的頁(yè)面就可以讀取深色方式開關(guān)，從而完成網(wǎng)頁(yè)的自順應(yīng)。CSS推出的 prefers-color-scheme 的 media 選擇器，使得網(wǎng)頁(yè)能夠適配深色模式和淺色模式。
什么是prefers-color-scheme？
2020年7月31日，W3C發(fā)布的 Media Queries Level 5 標(biāo)準(zhǔn)草案 中提到了新的屬性 prefers-color-scheme，網(wǎng)頁(yè)現(xiàn)在可以通過(guò)條件規(guī)則組來(lái)獲取瀏覽器宿系統(tǒng)的暗色模式狀態(tài)并應(yīng)用了。也就是說(shuō)，現(xiàn)在我們可以很簡(jiǎn)單地實(shí)現(xiàn)“暗色模式系統(tǒng)訪問(wèn)的頁(yè)面是暗色的，亮色模式系統(tǒng)訪問(wèn)的頁(yè)面是亮色的”。
prefers-color-scheme提供了兩個(gè)值；分別是 light 以及 night；顧名思義，light就是白天模式的樣式代碼，則night是深色模式的樣式代碼。
light——瀏覽器系統(tǒng)使用亮色主題的界面，同時(shí)也是默認(rèn)值，瀏覽器 privacy.resistFingerprinting 被設(shè)置為 true 時(shí)返回的也將是這個(gè)值。
dark——瀏覽器系統(tǒng)使用暗色主題的界面。
CSS語(yǔ)法
@media (prefers-color-scheme: <mode>) {
}
其中 mode 有如下可能的取值：
light：淺色模式
dark：深色模式
CSS樣式代碼
@media (prefers-color-scheme: light) {
// 亮色模式樣式
}
@media (prefers-color-scheme: dark) {
// 深色模式樣式
}
CSS變量
除了prefers-color-scheme，我們還要了解CSS變量的功能和用法。
CSS 變量（CSS variable）又叫做“CSS 自定義屬性”（CSS custom properties）。
變量的聲明使用變量名前面要加兩根連詞線–，變量名大小寫敏感。var()函數(shù)用于讀取變量。var()函數(shù)還可以使用第二個(gè)參數(shù)，表示變量的默認(rèn)值。如果該變量不存在，就會(huì)使用這個(gè)默認(rèn)值。
改造現(xiàn)有的網(wǎng)頁(yè)
有了這個(gè)功能，我們就可以著力改造現(xiàn)有的網(wǎng)頁(yè)。我們?cè)贑SS里將主題顏色使用CSS變量來(lái)表示，我們需要定義兩組變量，一套深色，一套淺色，使用如下的代碼進(jìn)行處理。
:root {
--bg: #FFFFFF;
--textColor: #000000;
--borderColor: #2C2C3A;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #000000;
--textColor: #FFFFFF;
--borderColor: #2C2C3A;
}
}
這樣，當(dāng)有人使用手機(jī)的深色模式系統(tǒng)主題時(shí)候，訪問(wèn)網(wǎng)站的時(shí)候，將會(huì)自動(dòng)切換到深色模式。
只使用 CSS 條件規(guī)則很難實(shí)現(xiàn)某些需求，我們可以對(duì) window 使用 matchMedia 方法得到的 Media 使用 matches 方法來(lái)獲取系統(tǒng)暗色模式狀態(tài)：
if (window.matchMedia('prefers-color-scheme: dark').matches) {
// 是暗色模式做什么
} else {
// 非暗色模式做什么
}
通過(guò)上面的改造，就可以實(shí)現(xiàn)手機(jī)端深色和淺色模式的自適應(yīng)切換。
來(lái)源：月光博客
