摘要：prefers-color-scheme 是什么？W3C 在 2020 年 7 月 31 日發(fā)布的 Media Queries Level 5 標(biāo)準(zhǔn)草案 中提到了新的屬性 prefers-color-scheme，網(wǎng)頁(yè)現(xiàn)在可以通過條件規(guī)則組來(lái)獲取瀏覽器宿系統(tǒng)的暗色模式狀態(tài)并應(yīng)用了。也就是說，現(xiàn)在我們可以很簡(jiǎn)單地實(shí)現(xiàn)...
近幾年，各個(gè)主流操作系統(tǒng)都逐漸開始重視暗色模式，從而改善用戶在環(huán)境光亮低時(shí)的閱讀體驗(yàn)。隨著水果在 iOS 13 與 macOS Mojave 中添加了暗色模式，除了 Linux 以外所有的主流操作系統(tǒng)都已經(jīng)實(shí)現(xiàn)了系統(tǒng)層級(jí)的暗色模式。Linux 由于 DE、WM 的種類繁雜暫時(shí)沒有統(tǒng)一的標(biāo)準(zhǔn)，但目前可以通過暗色 GTK+ 主題、瀏覽器插件等方式實(shí)現(xiàn)“偽全局”暗色模式。既然有了系統(tǒng)層級(jí)的適配，瀏覽器就可以讀取暗色模式開關(guān)，從而實(shí)現(xiàn)網(wǎng)頁(yè)的自適應(yīng)。這就是新標(biāo)準(zhǔn) prefers-color-scheme。
prefers-color-scheme 是什么
W3C 在 2020 年 7 月 31 日發(fā)布的 Media Queries Level 5 標(biāo)準(zhǔn)草案 中提到了新的屬性 prefers-color-scheme，網(wǎng)頁(yè)現(xiàn)在可以通過條件規(guī)則組來(lái)獲取瀏覽器宿系統(tǒng)的暗色模式狀態(tài)并應(yīng)用了。也就是說，現(xiàn)在我們可以很簡(jiǎn)單地實(shí)現(xiàn)“暗色模式系統(tǒng)訪問的頁(yè)面是暗色的，亮色模式系統(tǒng)訪問的頁(yè)面是亮色的”。
prefers-color-scheme 有 2 種值：
light —— 瀏覽器宿系統(tǒng)使用亮色主題的界面，同時(shí)也是默認(rèn)值，瀏覽器 privacy.resistFingerprinting 被設(shè)置為 true 時(shí)返回的也將是這個(gè)值
dark —— 瀏覽器宿系統(tǒng)使用暗色主題的界面
還有一個(gè)已廢棄的值：
no-preference —— 瀏覽器宿系統(tǒng)使用未知主題的界面，當(dāng)較舊版本的瀏覽器在宿系統(tǒng)不支持系統(tǒng)層級(jí)的暗色模式時(shí)會(huì)返回這個(gè)值，較舊版本的瀏覽器 privacy.resistFingerprinting 被設(shè)置為 true 時(shí)返回的也將是這個(gè)值。
@media (prefers-color-scheme: dark) {
// 暗色模式樣式
}
@media not (prefers-color-scheme: dark) {
// 淺色模式樣式
}只使用 CSS 條件規(guī)則很難實(shí)現(xiàn)某些需求，我們可以對(duì) window 使用 matchMedia 方法得到的 Media 使用 matches 方法來(lái)獲取系統(tǒng)暗色模式狀態(tài)：
const scheme = window.matchMedia('(prefers-color-scheme: dark)')
if (scheme.matches) {
// 深色模式業(yè)務(wù)處理代碼
console.log('當(dāng)前是深色模式');
tipText.innerHTML = darkTip
} else {
// 淺色模式業(yè)務(wù)處理代碼
console.log('當(dāng)前是淺色模式');
tipText.innerHTML = lightTip
}舉個(gè)例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>prefers-color-scheme</title>
<style>
/* 整個(gè)頁(yè)面配置為使用用戶的配色方案首選項(xiàng) */
/* 根元素，優(yōu)先級(jí)最高，與html選擇器相同 */
:root {
--color-background: #1b1b1b;
--color-border: #cacfd5;
--color-text-default: #0b1016;
--color-base: #f4f5f6;
--color-accent: #ba0d37;
--white-color-background: #fff;
color-scheme: light dark;
}
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
height: 100vh;
}
.light-scheme {
background: var(--white-color-background);
color: var(--color-text-default);
}
.dark-scheme {
background: var(--color-background);
color: var(--white-color-background);
}
h2 {
margin: 50px auto;
color: var(--color-accent)
}
/* 監(jiān)聽操作系統(tǒng)主題模式 */
@media (prefers-color-scheme: dark) {
body {
color: var(--white-color-background);
background-color: var(--color-background);
}
}
@media (prefers-color-scheme: light) {
body {
color: var(--color-text-default);
background-color: var(--white-color-background);
}
}
.tab-type {
display: flex;
justify-content: center;
padding-top: 100px;
}
.tab-type > li {
list-style: none;
cursor: pointer;
background-color: var(--color-accent);
border-radius: 12px;
padding: 8px 15px;
margin: 0px 20px;
font-size: 14px;
}
</style>
</head>
<body>
<div id="content">
<ul class="tab-type">
<li id="light">淺色主題</li>
<li id="dark">暗色主題</li>
</ul>
<h2>體驗(yàn) prefers-color-scheme</h2>
<div></div>
</div>
<script>
// 手動(dòng)修改主題顏色
const light = document.getElementById('light')
const dark = document.getElementById('dark')
const content = document.getElementsByTagName('body')[0]
const tipText = document.getElementsByClassName('scheme-tip')[0]
let lightTip = '當(dāng)前自定義主題：light亮色', darkTip = '當(dāng)前自定義主題：dark暗色'
light.onclick = function (params) {
content.setAttribute('class', 'light-scheme')
tipText.innerHTML = lightTip
}
dark.onclick = function (params) {
content.setAttribute('class', 'dark-scheme')
tipText.innerHTML = darkTip
}
// js 獲取系統(tǒng)主題模式
const scheme = window.matchMedia('(prefers-color-scheme: dark)')
if (scheme.matches) {
// 深色模式業(yè)務(wù)處理代碼
console.log('當(dāng)前是深色模式');
tipText.innerHTML = darkTip
} else {
// 淺色模式業(yè)務(wù)處理代碼
console.log('當(dāng)前是淺色模式');
tipText.innerHTML = lightTip
}
// 另外還可以實(shí)時(shí)監(jiān)聽系統(tǒng)暗色模式的狀態(tài)
window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
if (e.matches) {
// 系統(tǒng)變成了深色模式
console.log('變成了深色模式');
tipText.innerHTML = darkTip
} else {
// 系統(tǒng)變成了淺色模式
console.log('變成了淺色模式');
tipText.innerHTML = lightTip
}
});
</script>
</body>
</html>當(dāng)設(shè)置windows系統(tǒng)主題為【暗】時(shí)，網(wǎng)站主題會(huì)自動(dòng)變化，當(dāng)網(wǎng)站不滿足系統(tǒng)默認(rèn)主題，還想提供用戶自己切換主題的功能，代碼中有兩個(gè)按鈕，【淺色主題】和【暗色主題】就是干這件事情的。用戶可以隨意切換，具體切換代碼可以到j(luò)s部分查看，這個(gè)特性在某些場(chǎng)合還是比較實(shí)用的。
網(wǎng)友評(píng)論：
干貨滿滿，學(xué)習(xí)到了，感謝博主
2023-05-15 10:49:29 回復(fù)