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?

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

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

使用

有三种基本值能够使用

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