切换到深色模式按钮

Question

I have a template that sets dark mode only adding a class to the body. This template does not include a toggle button so I am trying to create it by myself but it goes back to light theme when I go to another file or reload the page.

I am using a button and this JS code

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

The problem is how can I save this settings, because once you reload it turns to the values set by default. I am sure there should be a front-end solution, but the only way I think is to create a table in a db and set the class inside an if and the button will be switching this value

Answer 1

A simplest solution is to use localStorage to store settings.

//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);
}

Answer 2

This cannot be done with front-end as storing data can only be done using databases.