最近有很多關於 “深色” 模式的討論，iOS、MacOS、Windows和Android都新增了全系統的深色模式，可以自動啟用應用程式和程式的深色模式。這種趨勢很好，但你的網站不能與這種系統範圍內的主題掛鉤，這是一個真正的恥辱。或者它能嗎？
在我繼續之前，我應該指出這個功能是一個建議的功能，目前還沒有在任何瀏覽器中出現。瞭解這些東西是很好的，甚至可以在你的專案中考慮到這一點，但現在還不要試圖把它推廣到生產中。
prefers-color-scheme
Mozilla有一個非常全面的所有本地網路技術的清單，這裡是他們對該功能的描述。
prefers-color-scheme CSS媒體功能是用來檢測使用者是否要求系統使用淺色或深色的主題。
讓我們稍稍解讀一下。我們看到它是一個 CSS media feature ，所以我們知道它是一個媒體查詢。我們還可以看到它有兩個選項：light 或 dark。
這意味著它看起來會像這樣。
@media (prefers-color-scheme: dark) {
:root {
...
}
}
果然，這就是語法。真的很簡單!
選項
讓我們從Mozilla獲得當前的選項列表。
no-preference
表示使用者沒有向系統提出任何偏好。這個關鍵詞的值在boolean context中被評估為false。
light
表示使用者已經通知系統他們喜歡淺色主題的介面。
dark
表示使用者已經通知系統他們喜歡深色主題的介面。
如果你看一下spec的草案，有一個腳註說他們也在考慮包括 forced 變數。
ISSUE 8 我們應該包括 ” forced-light “和 ” forced-dark “值嗎？我們不一定希望頁面試圖撤銷系統可能正在執行的內容。
實踐用途
你們中的一些人可能知道這個網站，dev.to，正在增加一個深色模式的過程中。這個網站也是開源的，所以你們任何人都可以參與進來，幫助這個過程
我已經開始將網站的主要區域轉移到CSS變數上，這是故意的，是一個緩慢的推廣，但它正在取得進展。
通過這個媒體查詢，我們可以做這樣的事情。
@media (prefers-color-scheme: dark) {
:root {
--theme-background: #303030;
--theme-top-bar-background: #1C1C1C;
--theme-top-bar-color: #FFFFFF;
--theme-top-bar-search-background: #303030;
--theme-top-bar-search-color: #FFFFFF;
--theme-container-background: #424242;
--theme-container-color: #FFFFFF;
}
}
而且，就像施了魔法一樣，整個網站有一個深色的主題，以配合作業系統。
當然，這並不完美，我們還需要一些更多的變數，但你可以看到，根據使用者的系統偏好來設計整個網站的主題是多麼容易。
小結
正如我在文章前面所說，這不是我們所擁有的東西，而且它還沒有一個ETA，但像這樣的功能推動了網路的發展 如果我們在它登陸時已經準備好了，我們可以幫助把這個功能推廣出去。
對於CSS，如果瀏覽器不理解你所寫的東西，它就會被忽略。因此，一旦它在一個瀏覽器中出現，就立即把它推出去並做好準備，這真的沒有什麼壞處。
Sources:
評論留言