深色模式css保存选项
深色模式css保存选项
提问于 2020-04-27 22:29:58
我最近在我的网站上设置了一个黑暗模式，就像这样> http://themes.semicolonweb.com/html/canvas/demo-articles.html
但正如你所看到的，当你刷新页面时，它不会保存你的选择，我想用js和localstorage保存选择，但不能让它工作。如果你对本地存储有任何建议，这里是我的代码：
jQuery(document).ready( function($){
function modeSwitcher( elementCheck, elementParent ) {
if( elementCheck.filter(':checked').length > 0 ) {
elementParent.addClass('dark');
$('.mode-switcher').toggleClass('pts-switch-active');
} else {
elementParent.removeClass('dark');
localStorage.toggled = "";
$('.mode-switcher').toggleClass('pts-switch-active', false);
}
}
$('.pts-switcher').each( function(){
var element = $(this),
elementCheck = element.find(':checkbox'),
elementParent = $('body');
modeSwitcher( elementCheck, elementParent );
elementCheck.on( 'change', function(){
modeSwitcher( elementCheck, elementParent );
});
});
});回答 1
Stack Overflow用户
发布于 2020-04-28 00:35:09
只是给你一个点子，
在暗模式下，单击保存本地存储变量的按钮，对亮模式执行相同的操作。在任何主题上，选择删除另一个本地存储变量。现在在document.ready上检查变量并应用相应的类或CSS，由于代码片段的限制，你不能在这里看到这段代码，但你可以把它放在你的本地并使用它，或者只检查这个codepen Link。
$(document).ready(function(){
$('#dark').click(function(){
localStorage.setItem('dark',true);
localStorage.removeItem('light', false);
$('body').css("background-color", '#000');
});
$('#light').click(function(){
localStorage.setItem('light',true);
localStorage.removeItem('dark',false);
$('body').css("background-color", '#fff');
});
var getLocalDarkVar = localStorage.getItem('dark');
if(getLocalDarkVar == "true") {
console.log("dark Theme");
$('body').css("background-color", '#000');
}else {
console.log("Light Theme");
$('body').css("background-color", '#fff');
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="dark">Dark Mode</button>
<button id="light">Light mode</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61461186
复制相关文章
相似问题
腾讯云开发者
