I am trying to add dark mode to my site. The on click event is working and will switch between the default(dark) mode and the selected (light) mode. However, these changes don't stick if the page is refreshed or the user navigates to another screen the site resets to the default mode. I believe my issue is in the implementation of local storage but I cannot figure out where I went wrong.
// local storage initiation
function localStorageSupported() {
try {
return "localStorage" in window && window["localStorage"] !== null;
} catch (e) {
return false;
}
}
console.log('checking local storage' + localStorage.getItem(localStorage))
// dark mode listener
var checkbox = document.querySelector('input[name=theme]');
checkbox.addEventListener('change', function() {
if(this.checked) {
trans()
document.documentElement.setAttribute('data-theme', 'selected'),
localStorage.setItem('theme', 'selected')
} else {
trans()
document.documentElement.setAttribute('data-theme', 'default'),
localStorage.setItem('theme', 'default')
}
console.log('click click boom' + checkbox)
})
// transition from default to selected theme
let trans = () => {
document.documentElement.classList.add('transition');
window.setTimeout(() => {
document.documentElement.classList.remove('transition')
}, 1000)
}
console.log('which theme am I...' + localStorage.getItem('theme'))
// store user preference
var data = localStorage.getItem('theme');
console.log('I have stored...' + localStorage.getItem('theme'))
<div class="toggle-container" id="navigationLink9">
<input type="checkbox" id="switch" name="theme" />
<label for="switch"> <span id="toggleDay">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path
d="M4.069 13h-4.069v-2h4.069c-.041.328-.069.661-.069 1s.028.672.069 1zm3.034-7.312l-2.881-2.881-1.414 1.414 2.881 2.881c.411-.529.885-1.003 1.414-1.414zm11.209 1.414l2.881-2.881-1.414-1.414-2.881 2.881c.528.411 1.002.886 1.414 1.414zm-6.312-3.102c.339 0 .672.028 1 .069v-4.069h-2v4.069c.328-.041.661-.069 1-.069zm0 16c-.339 0-.672-.028-1-.069v4.069h2v-4.069c-.328.041-.661.069-1 .069zm7.931-9c.041.328.069.661.069 1s-.028.672-.069 1h4.069v-2h-4.069zm-3.033 7.312l2.88 2.88 1.415-1.414-2.88-2.88c-.412.528-.886 1.002-1.415 1.414zm-11.21-1.415l-2.88 2.88 1.414 1.414 2.88-2.88c-.528-.411-1.003-.885-1.414-1.414zm2.312-4.897c0 2.206 1.794 4 4 4s4-1.794 4-4-1.794-4-4-4-4 1.794-4 4zm10 0c0 3.314-2.686 6-6 6s-6-2.686-6-6 2.686-6 6-6 6 2.686 6 6z"
id="sunIcon" />
</svg> </span>
<svg height="25" width="50">
<line x1="10" y1="0" x2="35" y2="35" style="stroke:#f48847;stroke-width: 2.25" />
</svg>
<span id="toggleNight">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path
d="M22 12c0 5.514-4.486 10-10 10-4.826 0-8.864-3.436-9.797-7.99 3.573.142 6.903-1.818 8.644-5.013 1.202-2.206 1.473-4.679.83-6.992 5.608-.194 10.323 4.338 10.323 9.995zm-10-12c-1.109 0-2.178.162-3.197.444 3.826 5.933-2.026 13.496-8.781 11.128l-.022.428c0 6.627 5.373 12 12 12s12-5.373 12-12-5.373-12-12-12z"
id="moonIcon" />
</svg>
</span></label>
</div>
html {
background-color: #e9ecef;
margin: 0;
padding: 0;
font-family: 'Bebas Neue', cursive;
font-family: 'Roboto', sans-serif;
--bg: #282d30;
--bg-box: #282d30;
--bg-panel: black;
--color-button: #f48847;
--color-headings: #f48847;
--color-stroke: #f48847;
--color-shadow: inset 0 0 1em #e9ecef;
--color-box-shadow: 0 1px 0.125em #e9ecef;
--color-text: #e9ecef;
--color-off: #e9ecef;
--color-on: #9e9e9e;
--color-button-text: #e9ecef;
--color-link: #e9ecef;
--color-link-hover: #282d30;
--color-line: #f48847;
}
html[data-theme='selected'] {
--bg: #e9ecef;
--bg-box: #e9ecef;
--bg-panel: #282d30;
--color-button: #282d30;
--color-headings: #282d30;
--color-stroke: #282d30;
--color-shadow: inset 0 0 1em #282d30;
--color-box-shadow: 0 1px 0.125em #282d30;
--color-text: #282d30;
--color-off: #9e9e9e;
--color-on: #e9ecef;
--color-button-text: #e9ecef;
--color-link: #e9ecef;
--color-link-hover: #f48847;
--color-line: #e9ecef;
}
I'm sure it can be cleaner but this is where I'm at. any suggestions? Thanks for the help.
When the page loads, you need to retrieve the theme from localStorage and set it.
let prev = localStorage.getItem('theme') || 'default';
document.documentElement.setAttribute('data-theme', prev);
checkbox.checked = prev === 'selected';