如何解决创建一个黑暗的主题开关-jQuery localStorage和CSS
我对jQuery和localStorage非常陌生。我正在创建一个深色主题选项供用户选择。我一切正常,但我肯定会有更好的方法。这是我当前拥有的代码,我知道我重复了太多代码。只是想不出如何简化它。如前所述,代码可以正常工作,但是当页面加载时,在到达我假定的本地存储之前,仍然会出现一个轻量主题。因此,即使他们选择了DARK主题,在页面加载时,灯光主题也会在切换前先闪烁1秒钟。
这就是密码
$(document).ready(function() {
var darkmode_data = localStorage.getItem("darkmode");
//CHK LOCALSTORAGE
if (darkmode_data == "yes") {
$("#darkmode").prop('checked',true);
$('body,.cardicon,.odd').toggleClass('darkmodebg');
$('.card-body,.card,footer.page-footer,.even').toggleClass('darkmodebg2');
$('h1,h2,h3,h4,h5,h6').toggleClass('darkmodetxt');
$('hr').toggleClass('darkmodehr');
$('.card .number').toggleClass('darkmodeblue');
}
else if(darkmode_data == "no"){
$("#darkmode").prop('checked',false);
}
//CLICK FUNCTION
$('#darkmode').click(function(e) {
$('body,h6').toggleClass('darkmodetxt');
$('hr').toggleClass('darkmodehr');
$('.card .number').toggleClass('darkmodeblue');
if ($(this).is(":checked")) {
localStorage.setItem("darkmode","yes");
}
else {
localStorage.setItem("darkmode","no");
}
});
});
您可以在代码中看到,当用户切换到黑暗模式时,我正在更改一些元素(14)样式。
非常感谢您的协助。我很感激。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。