CODEWITHSUNDEEP
javascriptlocal-storage
Alexander
Alexander

Reputation: 151

Set color theme with localStorage

I have a color theme system set up on my site. When you click a button, a class is added to <html> and its corresponding theme goes into effect. However, when I load my site for the first time (I use incognito mode to simulate this), none of the themes work. I want to rewrite a block of my code to basically say, "When there is nothing in localStorage, load 'theme-dark-blue'."

Here's my code:

  // function to set a given theme/color-scheme
  function setTheme(themeName) {
    localStorage.setItem('theme', themeName);
    document.documentElement.className = themeName;
  }

  // Immediately invoked function to set the theme on initial load
  (function () {
    if (localStorage.getItem('theme') === 'theme-dark-blue') {
      setTheme('theme-dark-blue');
    }
  })();

The other themes so far are 'theme-light-blue' and 'theme-dark-green'. I was thinking of trying to phrase it like, "If <html> does not have a class, set 'theme-dark-blue'"

Upvotes: 1

Views: 1443

Answers (4)

Michael Roqueburg
Michael Roqueburg

Reputation: 1

Best guess.

So far as I know, if try you setItem() something that has been removed from local storage or does not exist, then the return response is null.

So maybe find a way to code: "If a class is added to my HTML, then create a setItem() with the same name as that new class and add it to localMemory." If the class exists in local memory, getItem() will confirm this. If it does not, getItem() will return null.

So create your if statement saying: "If getItem(className) = null, then set theme-dark-blue"

Upvotes: 0

navnath
navnath

Reputation: 3714

   // function to set a given theme/color-scheme
  function setTheme(themeName) {
    // document.documentElement.className = themeName;
    document.getElementById("myDIV").className = themeName;
    localStorage.setItem('theme', themeName);
  }

  // Immediately invoked function to set the theme on initial load
  (function () {
    setTheme(localStorage.getItem('theme') || 'theme-dark-blue' );
  })();

Upvotes: 0

Denwakeup
Denwakeup

Reputation: 266

Here's what we need to do

  1. Get the value from the localStorage
  2. Check that it is valid
  3. If the value is not valid or is missing, then use the default
const validTheme = ['theme-dark-blue', 'theme-dark-green'];

const getThemeFromLocalStorage = () => {
    const savedTheme = localStorage.getItem('theme');

    return validTheme.includes(savedTheme) ? savedTheme : null;
};

setTheme(getThemeFromLocalStorage() || 'theme-dark-blue');

Upvotes: 0

Joel Robles Bentham
Joel Robles Bentham

Reputation: 48

  function setTheme(themeName) {
    localStorage.setItem('theme', themeName);
    document.documentElement.className = themeName;
  }

  // Immediately invoked function to set the theme on initial load
  (function () {
    if (localStorage.getItem('theme')) {
      setTheme(localStorage.getItem('theme'))
    } else {
      setTheme('theme-dark-blue')
    }

  })();

Here we check if the item in local storages exists, if it does we use it, if not we set de default theme class

Upvotes: 2

Related Questions