save selected theme to local storage

by Basil Savchuk

HTML

<div id="targetEl"></div>
<button id="button">Toggle theme</button>

CSS

div {
  width: 100px;
  height: 100px;
}

.dark {
  background: #000;
}

.light {
  background: #ccc;
}

JavaScript

const THEME_KEY = 'status';

function getThemeFromStorage() {
	return localStorage.getItem(THEME_KEY);
}

function setThemeToStorage(themeName) {
	localStorage.setItem(THEME_KEY, themeName);
}

function setTheme(themeName) {
  setThemeToStorage(themeName);
  document.querySelector('#targetEl').classList.value = themeName;
}

// Init. Default to 'light'
setTheme(getThemeFromStorage() || 'light');

document.querySelector('#button').onclick = () => {
	setTheme(getThemeFromStorage() === 'light' ? 'dark' : 'light');
}