css 適配手機深色模式

背景

iOS和安卓分別從 iOS 13 和 Android 10（不同廠商不盡相同，部分 Android 9 也支持） 開始加入深色模式的支持，各大瀏覽器紛紛開始支持深色模式，微信 iOS 客戶端 7.0.12、Android 客戶端 7.0.13 也支持了深色模式，網頁端適配深色模式後將更進一步提高用戶體驗的一致性。

如何切換深色模式

iOS：“設置”–“顯示與亮度”–“外觀”，選擇“深色”
Android（不同廠商可能略有差別，名字也不盡相同）：“系統設置”–“顯示”–“深色模式”。
適配指南
微信內置瀏覽器基於 Web 標準實現了對深色模式的支持，可以用一般 Web 頁面適配的方式進行適配，下面列舉幾種一般的適配方式：

一、 聲明 color-scheme

有兩種方式：

1. meta
   在head中聲明，聲明當前頁面支持 light 和 dark 兩種模式，系統切換到深色模式時，瀏覽器默認樣式也會切換到深色；
2. css

	:root {
	    color-scheme: light dark;
	}

二、 通過 CSS 媒體查詢

	:root {
	    color-scheme: light dark;
	    background: white;
	    color: black;
	}
	
	@media (prefers-color-scheme: dark) {
	    :root {
	        background: black;
	        color: white;
	    }
	}

顏色較多的情況，建議使用CSS變量對顏色值進行管理

	:root {
	    color-scheme: light dark;
	    --nav-bg-color: #F7F7F7;
	    --content-bg-color: #FFFFFF;
	    --font-color: rgba(0,0,0,.9);
	}
	
	@media (prefers-color-scheme: dark) {
	    :root {
	        --nav-bg-color: #2F2F2F;
	        --content-bg-color: #2C2C2C;
	        --font-color: rgba(255, 255, 255, .8);
	    }
	}
	
	:root {
	    color: var(--font-color)
	}
	
	.header {
	    background-color: var(--nav-bg-color);
	}
	
	.content {
	    background-color: var(--content-bg-color);
	}

三、 圖片適配
利用picture+source標籤，設置不同模式下的圖片 url。

	<picture>
	    <!-- 深色模式下的圖片 -->
	    <source srcset="dark.jpg" media="(prefers-color-scheme: dark)" />
	    <!-- 默認模式下的圖片 -->
	    <img src="light.jpg"/>
	</picture>

四、 JavaScript中判斷當前模式&監聽模式變化
利用的是matchMedia方法，具體用法參考以下例子：

	const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
	
	function darkModeHandler() {
	    if (mediaQuery.matches) {
	        console.log('現在是深色模式')
	    } else {
	        console.log('現在是淺色模式')
	    }
	}
	
	// 判斷當前模式
	darkModeHandler()
	// 監聽模式變化
	mediaQuery.addListener(darkModeHandler)