如何讓你的網站支援蘋果系列的深色Dark模式

• 2019 年 12 月 9 日
• 筆記

我也是直接換上了 iPad 的深色模式，mbp 使用正常的淺色模式，訪問自己網站的時候發現一個問題，就是下面這個引用樣式有些問題

我是一個引用段落

在未修復前，深色模式看的話就是一片空白，因為深色模式的字體是白色，同時給了一個background-color:#f5f5f5樣式所導致

這個是不能忍的，蘋果用戶還是蠻多的，並且 Safari、Chrome 目前都支援深色模式，所以來適配一下

這裡需要用到一個媒體查詢@media的語法

prefers-color-scheme 用於檢測用戶的系統主題是淺色或深色，此屬性有三個值

no-preference表示用戶未指定作業系統模式，其作為布爾值時以 false 輸出

light表示用戶的作業系統是淺色模式

dark表示用戶的作業系統是深色模式

它的用法也是很簡單，默認都是淺色模式的，所以我們只寫深色模式的樣式就行

@media (prefers-color-scheme: light) {      /* 淺色模式樣式 */  }    @media (prefers-color-scheme: dark) {      /* 深色模式樣式 */  }

就醬紫。

沈唁志，一個PHPer的成長之路！ 任何個人或團體，未經允許禁止轉載本文：《如何讓你的網站支援蘋果系列的深色Dark模式》，謝謝合作！