I’m trying to implement a localStorage for my dark mode, but I can’t do it, whats the best way to do it so?
Here is my working JS / Html code, what I need is no
<div class="mode-switch">
<button class="mode magic-hover" id="menu-btn" onclick="theme()"></button>
</div>
<script>
function theme() {
var element = document.body;
element.classList.toggle("darkmode");
}
<script>
Advertisement
Answer
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
To set it:
function theme() {
var element = document.body;
element.classList.toggle("darkmode");
let newmode = element.classList.contains('darkmode') ? 'darkmode' : 'lightmode';
localStorage.setItem('mode', newmode)
}
to get it
window.onload = function() {
let newmode = localStorage.getItem('mode') || "";
document.body.classList.add(newmode);
}