在页面刷新时保持切换位置

Question

我对HTML/CSS/JS很陌生。。。我有一个亮/暗模式切换开关，可以在我的asp.net核心网站上激活暗模式。一切都很好，我使用localhost在页面刷新或加载时保存暗/亮主题。问题是我的拨动开关一直恢复到亮模式。我尝试了几个选项，但似乎不知道需要做些什么才能在页面加载时将切换开关保持在正确的位置。

这是我的代码

HTML复选框：

<div class="toggle-container">
<input type="checkbox" id="dark-mode-switch" name="theme" /><label for="dark-mode-switch">Toggle</label>
</div>

CSS：

.switch {
align-self: self-end;
margin: inherit;
padding: inherit;
border-radius: 15px;
display: grid;
grid-template-columns: 90px auto;
grid-template-rows: auto auto;
grid-template-areas: "title switch" "content content";
}
.switch h1 {
margin: auto;
color: var(--color-headings);
font-size: 16px;
line-height: inherit;
}

input[type=checkbox] {
height: 0;
width: 0;
visibility: hidden;
}
label {
cursor: pointer;
text-indent: -9999px;
width: 52px;
height: 27px;
background: grey;
float: right;
border-radius: 100px;
position: relative;
}
label:after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 90px;
transition: 0.4s;
}
input:checked + label{
background: var(--color-headings);
}
input:checked + label:after {
left: calc(100% - 5px);
transform: translateX(-100%);
}
label:active:after {
width: 45px;
}
html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
transition: all 750ms !important;
transition-delay: 0 !important;

JS-

let darkMode = localStorage.getItem('data-theme');
const checkbox = document.querySelector('input[name=theme]');
if (darkMode === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark')
localStorage.setItem('data-theme', 'dark')
}
checkbox.addEventListener('change', function () {
if (this.checked) {
trans()
document.documentElement.setAttribute('data-theme', 'dark')
localStorage.setItem('data-theme', 'dark')

} else {
trans()
document.documentElement.setAttribute('data-theme', 'light')
localStorage.setItem('data-theme', 'light')
}
})
let trans = () => {
document.documentElement.classList.add('transition');
window.setTimeout(() => {
document.documentElement.classList.remove('transition')
}, 1000)
}

Answer 1

我认为问题是您没有重新分配"已检查"；复选框的属性。您有基于复选框值更新暗模式的代码，但不能反过来。

解决此问题的一种方法是修改if (darkmode === 'dark')代码以设置checkbox的checked属性，而不是直接更新data-theme和本地存储。这应该有效：

if (darkMode === 'dark') {
checkbox.checked = true;
}

您还应该重新排列您的JS，以确保您没有未定义的引用。我个人会这样安排：

const checkbox = document.querySelector('input[name=theme]');
let trans = () => {
...
}
checkbox.addEventListener('change', function () {
...
})

let darkMode = localStorage.getItem('data-theme');
if (darkMode === 'dark') {
...
}

至少，在更新checked的值之前，必须定义更改事件侦听器，否则从本地存储加载时不会触发事件。

此外，此代码需要位于HTML的末尾，或者封装在domready事件处理程序中。否则，checkbox可能未定义，您的代码将无法工作。

---

更新：我刚刚看到您正在使用ASP.NET，因此以下内容不适用。但我将把它留在这里供参考，因为它可能对其他人有所帮助。这是本地存储的常见问题。

最后，对于通过file://URL加载的文件，不会保存本地存储。如果你把它放在一个文件中，并直接加载到web浏览器中(没有服务器(，那么每次离开页面时，本地存储都会重置。