一、CSS 的媒體查詢

prefers-color-scheme (https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-color-scheme) 是一種用于檢測(cè)用戶是否有將系統(tǒng)的主題色設(shè)置為亮色或者暗色的 CSS 媒體特性。利用其設(shè)置不同主題模式下的 CSS 樣式，瀏覽器會(huì)自動(dòng)根據(jù)當(dāng)前系統(tǒng)主題加載對(duì)應(yīng)的 CSS 樣式。light 適配淺色主題，dark 適配深色主題，no-preference 表示獲取不到主題時(shí)的適配方案。

    @media (prefers-color-scheme:light){
        /* 當(dāng)系統(tǒng)是使用淺色模式 */
        body{
            background-color: #fff;
            color: #000;
        }
    }
    @media (prefers-color-scheme:dark){
        /* 當(dāng)系統(tǒng)是使用深色模式 */
        body{
            background-color: #000;
            color: #fff;
        }
    }
    @media (prefers-color-scheme:no-preference){
        body{
            background-color: #fff;
            color: #000;
        }
    }

淺色模式效果如圖：

image.png

深色模式效果如圖：

image.png

二、使用window.matchMedia + CSS 的變量

window.matchMedia (https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia) 方法可以用來(lái)查詢指定的媒體查詢字符串解析后的結(jié)果。結(jié)合 CSS 變量和 matchMedia 的查詢結(jié)果，設(shè)置對(duì)應(yīng)的 CSS 主題顏色。該方法更靈活，可以單獨(dú)抽離主題色進(jìn)行適配，深色模式匹配 (prefers-color-scheme: dark) ，淺色模式匹配 (prefers-color-scheme: light) 。

監(jiān)聽主題模式，深色模式時(shí)為 body 添加類名 dark，根據(jù) CSS 變量的響應(yīng)式布局特點(diǎn)，自動(dòng)生效 dark 類名下的 CSS。

   .dark{
        background-color: #000000;
        color: #fff;
    }

<script>
    const darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');//匹配深色模式
    console.log(darkMode)
    // 判斷是否匹配深色模式， matches為true代表當(dāng)前系統(tǒng)是深色模式
    if (darkMode && darkMode.matches) {
        document.body.classList.add('dark');
    }
    // 監(jiān)聽主題切換事件
    darkMode && darkMode.addEventListener('change', e => {
    if (e.matches) {
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
    }
    });
</script>

淺色模式效果如圖：

image.png

深色模式效果如圖：

image.png