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