就在前几天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) {
/* 深色模式样式 */
}
就酱紫。
你好,我又来问你了。。这个代码加在哪个php里啊~
安卓手机要怎么查询手机是否是深色模式,用prefers-color-scheme是不兼容的
夜间来个深色模式是个不错的选择。