Save theme settings in Local Storage?

Questions
1

Save theme settings (Dark Mode) persistent.

How can I save these settings in local storage and set them correctly again when I start the app.

Code for the toggle works, but not persitent yet:

$$('input[name="color-radio"]').on("change", function() {
  if (this.checked) {
    $$(".view").attr("class", "view view-main view-init");
    $$(".view").addClass("color-theme-" + $$(this).val());
    if ($$(".toggle input")[0].checked) {
      $$(".view").addClass("theme-dark");
    }
  }
});
$$(".toggle input").on("change", function() {
  if (this.checked) {
    $$(".view").addClass("theme-dark");
  } else {
    $$(".view").removeClass("theme-dark");
  }
});
2

Use ‘localStorage’ https://www.w3schools.com/jsref/prop_win_localstorage.asp

var storage = window.localStorage;

// Call a function to set the theme's value, pass a parameter of the theme.
// 'theme' becomes the key in storage, and the value of 'chosenTheme' is the stored value.
 function setThemeToLocalStorage(chosenTheme) {
    storage.setItem('theme', chosenTheme); 
    };

// A function to recall from localStorage:
function checkForTheme() {
    if (storage.getItem('theme') == 'dark') {
      // Code to execute for dark theme
  } else {
     // Other code for a light theme
  }
}
3

Thank you.

How do I use this specifically with the code from above?

4

You’d use Dom7 .addClass to apply the theming classes to the parent elements. And you’d set the value in localStorage by modifying your existing code:

$$(".toggle input").on("change", function() {
  if (this.checked) {
    $$(".view").addClass("theme-dark");
    setThemeToLocalStorage("dark");
  } else {
    $$(".view").removeClass("theme-dark");
    setThemeToLocalStorage("light");
  }
});