javascript 切换到暗模式按钮

wmvff8tz  于 2023-01-08  发布在  Java
关注(0)|答案(1)|浏览(160)

我有一个模板,设置黑暗模式只添加一个类的身体。这个模板不包括一个切换按钮,所以我试图创建它自己,但它回到轻主题时,我去另一个文件或重新加载页面。
我正在使用一个按钮和这个JS代码

var body = document.querySelector('body');
button.onclick = function(){
body.classList.toggle('dark-layout');
}

问题是我如何保存这些设置,因为一旦你重新加载它就会变成默认设置的值,我确信应该有一个前端解决方案,但我认为唯一的方法是在一个数据库中创建一个表,并在一个if中设置类,按钮将切换这个值

bmp9r5qi

bmp9r5qi1#

最简单的解决方案是使用localStorage存储设置。

//read stored setting on startup
let isDarkMode = localStorage.getItem("darkmode");
//apply setting
setDarkMode();

button.onclick = function(){
  isDarkMode = !isDarkMode;
  setDarkMode(isDarkMode);
}
function setDarkMode(value = isDarkMode)
{
  value = ~~value; //convert to integer
  document.body.classList.toggle('dark-layout', value);
  localStorage.setItem("darkmode", value);
}

相关问题