JS 36 - 新增并记录网页的偏好颜色模式

大家好！

今天我们要实作网页的深浅色模式。
我们进入今天的主题吧！

样式

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，我们明天再见！