暗模式选择不保存在本地存储中

Question

我正在尝试为我的网站添加深色模式。单击事件正在工作，并将在默认（深色）模式和选定（浅色）模式之间切换。但是，如果刷新页面或用户导航到另一个屏幕，站点将重置为默认模式，这些更改将不会生效。我认为我的问题出在本地存储的实现上，但我不知道哪里出了问题。

// local storage initiation
function localStorageSupported() {
    try {
     return "localStorage" in window && window["localStorage"] !== null;
    } catch (e) {
     return false;
    }
   }
   console.log('checking local storage' + localStorage.getItem(localStorage))

// dark mode listener
var checkbox = document.querySelector('input[name=theme]');
checkbox.addEventListener('change', function() {
    if(this.checked) {
        trans()
        document.documentElement.setAttribute('data-theme', 'selected'),
        localStorage.setItem('theme', 'selected')
    } else {
        trans()
        document.documentElement.setAttribute('data-theme', 'default'),
        localStorage.setItem('theme', 'default')
    }
    console.log('click click boom' + checkbox)
})

// transition from default to selected theme
let trans = () => {
    document.documentElement.classList.add('transition');
    window.setTimeout(() => {
        document.documentElement.classList.remove('transition')
    }, 1000)
}
console.log('which theme am I...' + localStorage.getItem('theme'))

// store user preference
var data = localStorage.getItem('theme');
console.log('I have stored...' + localStorage.getItem('theme'))

 <div class="toggle-container" id="navigationLink9">
            <input type="checkbox" id="switch" name="theme" />
            <label for="switch"> <span id="toggleDay">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                        <path
                            d="M4.069 13h-4.069v-2h4.069c-.041.328-.069.661-.069 1s.028.672.069 1zm3.034-7.312l-2.881-2.881-1.414 1.414 2.881 2.881c.411-.529.885-1.003 1.414-1.414zm11.209 1.414l2.881-2.881-1.414-1.414-2.881 2.881c.528.411 1.002.886 1.414 1.414zm-6.312-3.102c.339 0 .672.028 1 .069v-4.069h-2v4.069c.328-.041.661-.069 1-.069zm0 16c-.339 0-.672-.028-1-.069v4.069h2v-4.069c-.328.041-.661.069-1 .069zm7.931-9c.041.328.069.661.069 1s-.028.672-.069 1h4.069v-2h-4.069zm-3.033 7.312l2.88 2.88 1.415-1.414-2.88-2.88c-.412.528-.886 1.002-1.415 1.414zm-11.21-1.415l-2.88 2.88 1.414 1.414 2.88-2.88c-.528-.411-1.003-.885-1.414-1.414zm2.312-4.897c0 2.206 1.794 4 4 4s4-1.794 4-4-1.794-4-4-4-4 1.794-4 4zm10 0c0 3.314-2.686 6-6 6s-6-2.686-6-6 2.686-6 6-6 6 2.686 6 6z"
                            id="sunIcon" />
                    </svg> </span>
                <svg height="25" width="50">
                    <line x1="10" y1="0" x2="35" y2="35" style="stroke:#f48847;stroke-width: 2.25" />
                </svg>
                <span id="toggleNight">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                        <path
                            d="M22 12c0 5.514-4.486 10-10 10-4.826 0-8.864-3.436-9.797-7.99 3.573.142 6.903-1.818 8.644-5.013 1.202-2.206 1.473-4.679.83-6.992 5.608-.194 10.323 4.338 10.323 9.995zm-10-12c-1.109 0-2.178.162-3.197.444 3.826 5.933-2.026 13.496-8.781 11.128l-.022.428c0 6.627 5.373 12 12 12s12-5.373 12-12-5.373-12-12-12z"
                            id="moonIcon" />
                    </svg>
                </span></label>
        </div>

html {
    background-color: #e9ecef;
    margin: 0;
    padding: 0;
    font-family: 'Bebas Neue', cursive;
    font-family: 'Roboto', sans-serif;
    --bg: #282d30;
    --bg-box: #282d30;
    --bg-panel: black;
    --color-button: #f48847;
    --color-headings: #f48847;
    --color-stroke: #f48847;
    --color-shadow: inset 0 0 1em #e9ecef;
    --color-box-shadow: 0 1px 0.125em #e9ecef;
    --color-text: #e9ecef;
    --color-off: #e9ecef;
    --color-on: #9e9e9e;
    --color-button-text: #e9ecef;
    --color-link: #e9ecef;
    --color-link-hover: #282d30;
    --color-line: #f48847;
}
html[data-theme='selected'] {
    --bg: #e9ecef;
    --bg-box: #e9ecef;
    --bg-panel: #282d30;
    --color-button: #282d30;
    --color-headings: #282d30;
    --color-stroke: #282d30;
    --color-shadow: inset 0 0 1em #282d30;
    --color-box-shadow: 0 1px 0.125em #282d30;
    --color-text: #282d30;
    --color-off: #9e9e9e;
    --color-on: #e9ecef;
    --color-button-text: #e9ecef;
    --color-link: #e9ecef;
    --color-link-hover: #f48847;
    --color-line: #e9ecef;
}

我相信它可以更干净，但这就是我所在的位置。有什么建议么？感谢您的帮助。

Answer 1

当页面加载时，您需要从 localStorage 中检索主题并进行设置。

let prev = localStorage.getItem('theme') || 'default';
document.documentElement.setAttribute('data-theme', prev);
checkbox.checked = prev === 'selected';

暗模式选择不保存在本地存储中

Dark mode selection not saving in local storage

javascript

local-storage

darkmode