我正在尝试为我的网站添加黑暗模式。点击事件正在工作，将在默认(暗(模式和选定(亮(模式之间切换。然而，如果页面被刷新或用户导航到另一个屏幕，则这些更改不会持续，该网站将重置为默认模式。我相信我的问题在于本地存储的实现，但我不知道哪里出了问题。
// 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;
}
我相信它可以更干净，但这就是我现在的位置。有什么建议吗？谢谢你的帮助。
加载页面时，需要从localStorage中检索主题并进行设置。
let prev = localStorage.getItem('theme') || 'default';
document.documentElement.setAttribute('data-theme', prev);
checkbox.checked = prev === 'selected';