前言
在暗黑模式下，系統(tǒng)對所有窗口，視圖，菜單和控件采用較暗的調(diào)色板。Youtube 支持對比效果，可以看出
優(yōu)勢
- 可大幅減少耗電量（具體取決于設(shè)備的屏幕技術(shù)）
- 為弱視以及對強(qiáng)光敏感的用戶提高可視性
- 讓所有人都可以在光線較暗的環(huán)境中更輕松地使用設(shè)備
系統(tǒng)兼容情況
- macOS 10.14 引入了 darkmode，（設(shè)置方式：系統(tǒng)偏好設(shè)置-通用-外觀-深色）
- ios13 2019 年 3 月發(fā)布的 ios13 版本加入了 darkmode，（設(shè)置方式：顯示與亮度-深色）
- Android 10 (API 級別 29) 及更高版本中提供深色主題背景 地址 （設(shè)置方式：顯示與亮度-深色模式-開啟）
- window10 2018年10月10（設(shè)置方式：右鍵-個性化-顏色-深色）
h5支持
meta配置
在head中聲明meta
<meta name="color-scheme" content="light dark">
css適配
此聲明并非為頁面做自動適配，只影響瀏覽器默認(rèn)樣式
:root {
color-scheme: light dark;
}
prefers-color-scheme CSS 媒體特性用于檢測用戶是否有將系統(tǒng)的主題色設(shè)置為亮色或者暗色。
@media (prefers-color-scheme: dark) {
.day.dark-scheme { background: #333; color: white; }
.night.dark-scheme { background: black; color: #ddd; }
}
注意：prefers-color-scheme 在 W3C 規(guī)范上處于媒體查詢 level5 的草案，在生產(chǎn)環(huán)境還需要針對不同瀏覽器做一些向下兼容處理。
js適配
Window.matchMedia 表示指定的媒體查詢字符串解析后的結(jié)果
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
function darkModeHander(){
if(mediaQuery.matches){
console.log('是深色模式');
} else {
console.log('是淺色模式');
}
}
mediaQuery.addListener(darkModeHander);
mediaQuery 得到 MediaQueryList
// MediaQueryList
{
matches: false,
media: "(prefers-color-scheme: dark)",
onchange: null,
}
注意：如果是 native 上的 webview 容器只需要支持 darkmode 的 runtime 就可以，就不用考慮兼容處理了。針對app有自己的暗黑，還存在跟隨系統(tǒng)暗黑的情況，或者其他的邏輯，如果用媒體查詢還是無法解決的，其實(shí)完全可以通過js做邏輯判斷添加新的類來控制暗黑樣式。之前做的暗黑的需求就是通過和webview交互獲得當(dāng)前暗黑標(biāo)識，添加class來控制的樣式，沒有使用媒體查詢
圖片適配
瀏覽器會選擇最匹配的子<source>元素，如果沒有匹配的，就選擇 <img>元素的src屬性中的URL。然后，所選圖像呈現(xiàn)在<img>元素占據(jù)的空間中。
<picture>
<!-- 深色模式下的圖片 -->
<source srcset="dark.png" media="(prefers-color-scheme: dark)"></source>
<!-- 默認(rèn)模式下的圖片 -->
<img src="light.png"/>
</picture>
其他
更多的媒體查詢適配！
根據(jù)Specification [drafts.csswg.org]W3C 草案中的說明，通過媒體查詢和 js matchMedia Api 不僅可以用來適配 darkmode。還可以通過下面的 key 來適配更多的場景：
- inverted-colors：反轉(zhuǎn)色
- prefers-reduced-motion：減少動畫
- prefers-reduced-transparency：透明度
- prefers-contrast：對比度
- forced-colors：指定顏色
參考文章
掃盲， H5適配暗黑主題（DarkMode）全部解法
Web前端H5項(xiàng)目適配暗黑模式
h5如何實(shí)現(xiàn)暗黑？
H5 項(xiàng)目如何適配暗黑模式
WebKit中已支持暗黑模式
iOS13 暗黑模式設(shè)計(jì)原則及建議
Dark Mode - Visual Design - macOS - Human Interface Guidelines - Apple Developer
深色主題背景 | Android Developers
