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

写在最前面

• 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?

image

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

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

image

使用

有三种基本值可以使用

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

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/…