近幾年，各個主流作業系統都逐漸開端注重深色方式，進而改善使用者在環境光亮低時的閱讀體驗。随着水果在 iOS 13 與 macOS Mojave 中添加了深色方式，除了 Linux 以外一切的主流作業系統都曾經完成了系統層級的深色方式。Linux 由于 DE、WM 的種類繁雜暫時沒有統一的标準，但目前可以經過深色 GTK+ 主題、閱讀器插件等方式完成“僞全局”深色方式。既然有了系統層級的适配，閱讀器就可以讀取深色方式開關，進而完成網頁的自順應。這就是新标準 prefers-color-scheme
。
首先，大家知道什麼是prefers-color-scheme嗎？
什麼是prefers-color-scheme？
去年7月末，W3C釋出的
Media Queries Level 5 标準草案中提到了新的屬性
prefers-color-scheme
，大緻的内容就是網頁可以通過這個CSS的條件，來擷取使用者裝置目前的顔色模式。
通俗的講，我們在前台切換裝置的顔色模式，網頁也可以跟着自動切換。
這個東西怎麼用？
prefers-color-scheme
提供了兩個值；分别是 light 以及 night；
顧名思義，light就是白天模式的樣式代碼，則night是
深色模式的樣式代碼；
詳細介紹：
-
light
privacy.resistFingerprinting
true
-
dark
還有一個已廢棄的值：
-
no-preference
privacy.resistFingerprinting
true
CSS樣式代碼：
@media (prefers-color-scheme: light) {
// 亮色模式樣式
}
@media (prefers-color-scheme: dark) {
// 深色模式樣式
} 通過條件規則組就可以作出判斷。
我們可以将這串代碼放在網站的自定義style裡面，如圖：
或者，也可以這麼寫：
@media not (prefers-color-scheme: dark) {
// 亮色模式樣式
}
@media (prefers-color-scheme: dark) {
// 深色模式樣式
} 當然了，目前測試在MacOS系統完美适配，Win系統暫時沒有進行測試
源代碼下載下傳
Dark-light
下載下傳像我自己的部落格，其中已經包含了Javascript，來實作使用者跟随深色模式的代碼，大家可以參考一下：
if (window.matchMedia('prefers-color-scheme: dark').matches) {
// 深色模式的條件代碼
} else {
// 非深色模式的條件代碼
} 另外還可以監聽系統深色模式的狀态，在系統開關深色模式時作出反應：
window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
if (e.matches) {
// 深色模式的條件代碼
} else {
// 非深色模式的條件代碼
}
}); 浏覽器的相容性
看得懂嗎？看不懂别急，夏柔給你重新寫了一個表，你來看看：
以下是夏柔測試的浏覽器，和官方的浏覽器相容性對比：
| 相容 | 不相容 |
| Chrome（MacOS、夏柔） | IE（孤零零） |
| WebView（MacOS、夏柔） | |
| 微信X5核心（華為鴻蒙、夏柔） | |
| Firefox（MacOS、夏柔） | |
| IOS 上的 Safari 浏覽器（官方通過、夏柔未測試） | |
| Samsung Internet（官方通過、夏柔未測試） | |
| Opera Android（官方通過、夏柔未測試） | |
| Opera（官方通過、夏柔未測試） | |
| Chrome（華為鴻蒙、夏柔） | |
| Edge（官方通過、夏柔未測試） | |
| Onion（洋蔥）（MacOS、華為鴻蒙、夏柔） | |
| 更多暫未測試（沒時間了，抱歉） |
如何應用到WordPress的主題上？
最簡單的方法，就是下面的樣式代碼添加至目前主題footer.php 檔案裡
<style>
@media (prefers-color-scheme: light) {
// 亮色模式樣式
}
@media (prefers-color-scheme: dark) {
// 深色模式樣式
}
</style> 再或者更簡單的方法，把亮色的代碼去掉就可以了；
<style>
@media (prefers-color-scheme: dark) {
// 深色模式樣式
}
</style> 大家有能力的話可以自己寫；
最後，轉載請注明來源，謝謝！