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'"
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
Here's what we need to do
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');
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"