如何让你的网站支持苹果系列的深色Dark模式

就在前几天 9 月 20 日凌晨，苹果正式推送 iOS13、iPadOS13，iPhone 和 iPad 的深色模式也终于来了

我也是直接换上了 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模式》，谢谢合作！