I made a button for dark mode, but when I leave the page, it goes back to light mode. How can I save the user’s choice so that when they go to another page they can continue in the mode they chose?
Js:
let trilho = document.getElementById('trilho')
let body = document.querySelector('body')
trilho.addEventListener('click', ()=>{
trilho.classList.toggle('dark')
body.classList.toggle('dark')
})
Css:
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
body {
height: 100px;
width: 100%;
background-color: #fafafa;
}
/* DARK MODE */
.trilho {
width: 70px;
height: 30px;
background-color: #6e6d6d;
border-radius: 70px;
position: relative;
cursor: pointer;
}
.trilho .indicador {
width: 30px;
height: 30px;
background-color: #000;
border-radius: 50%;
transform: scale(.8);
position: absolute;
left: 0;
transition: .5s;
}
.trilho.dark {
background-color: #c3c3c3;
}
.trilho.dark .indicador {
left: 38px;
background-color: #fff;
}
body.dark .container {
background-color: #000;
}
body.dark footer {
background-color: #000;
}
body.dark header {
background-color: #000;
}
body.dark h1 {
color: #fff;
}
body.dark a {
color: #fff;
}
body.dark form{
box-shadow: none;
}
body.dark .rodape{
color: #fff;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="darkmode.js" async></script>
</head>
<body>
<header>
<nav>
<ul class="nav-links">
<li><a href="/">link</a></li>
<li><a href="/">link</a></li>
<li><a href="#">link</a></li>
</ul>
<div class="menu-hamb-button hide-on-desktop">
<div class="btn-line"></div>
<div class="btn-line"></div>
<div class="btn-line"></div>
</div>
</nav>
<div class="trilho" id="trilho">
<div class="indicador"></div>
</div>
</header>
<div class="container">
<h1>Website</h1>
</div>
<footer>
<span class="rodape">Website</span>
</footer>
</body>
</html>
I tried some javascript commands for local storage, but they didn’t work in my html/css, maybe because the way I made my dark mode is different, I don’t know.
