iT邦幫忙

2021 iThome 鐵人賽

2
Modern Web

JavaScript 從 50% 開始,打造函式庫不是問題!系列 第 36

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,我們明天再見!


上一篇
JS 35 - 用 input 選擇圖片後顯示預覽圖
下一篇
JS 37 - 滾動網頁即自動浮現元素
系列文
JavaScript 從 50% 開始,打造函式庫不是問題!46

尚未有邦友留言

立即登入留言