大家好！

今天我們要實作網頁的深淺色模式。
我們進入今天的主題吧！

樣式

body {
    background-color: #fafafa;
    color: #323232;
    transition: background-color 0.5s,
                color 0.5s;
}

body[data-color-scheme="dark"] {
    background-color: #323232;
    color: #fafafa;
}

程式碼

window.addEventListener('load', function () {
    const data = 'data-color-scheme';
    let scheme = window.localStorage ? localStorage.getItem(data) : null;
    if (scheme !== 'light' || scheme !== 'dark') {
        const dark = '(prefers-color-scheme: dark)';
        scheme = window.matchMedia ? (matchMedia(dark).matches ? 'dark' : 'light') : 'light';
    }
    /* 網頁載入後執行一次 */
    shift();
    /* 點擊按鈕後切換模式 */
    Felix('#switch').on('click', shift);
    function shift(e) {
        if (e) scheme = scheme === 'dark' ? 'light' : 'dark';
        Felix('body')[0].setAttribute(data, scheme);
        if (window.localStorage) localStorage.setItem(data, scheme);
    }
});

實測

範例連結製作中。

差不多也到尾聲了。
如果對文章有任何疑問，也歡迎在下方提問和建議！
我是 Felix，我們明天再見！