CSS3: Mac OS - light 和 dark 模式兼容属性perfers-color-scheme

2021-02-02 10:17:21 浏览数 (1)

写在最前面

Mac OS 和 ipad OS ，iOS 都上了dark 和 light 模式，前端的兼容不容急缓，这里来了解一下一个 css 的新属性 perfers-color-scheme。

Mac OS

Mac OS 在 Mojave在支持暗黑模式以后，随之 chrome 和 safari 也支持暗黑模式，作为一个前端 er 也要了解一下相关的兼容问题。

今天的主角

perfers-color-schme: CSS Media Query

基础

can i use?

先看看效果（仅仅支持 macOS Mojave 的机器）

需要 chrome 76 , safari 12.1 , Firefox 67
codepen (使用的时候切换外观的查看效果)

使用

有三种基本值可以使用

no-preference
- 表示用户未指定操作系统主题。其作为布尔值时以false输出。
light
- 表示用户的操作系统是浅色主题。
dark
- 表示用户的操作系统是深色主题。

代码语言：javascript复制

body {
	background-color: gray;
}


@media (prefers-color-scheme: light) {
	body {
        color: black;
		background-color: white;
	}
}

@media (prefers-color-scheme: dark) {
	body {
        color: white;
		background-color: black;
	}
}

参考

davidwalsh.name/prefers-col…
developer.mozilla.org/en-US/docs/…

0 人点赞