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