Dark mode toggle con CSS e Javascript
In questo articolo vedremo come abilitare/disabilitare la dark mode usando CSS e un pizzico di Javascript.
La parte HTML ovviamente sarà basica; ho agigunto qualche elemento giusto per farvi vedere cosa succede al cambio di modalità.
Qui sotto il codice completo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>TEST</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<style>
.nav {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid black;
}
.menu_links {
display: flex;
gap: 10px;
}
.dark_nav {
background-color: #191919;
border-bottom: 1px solid #f1f1f1;
}
.menu_links li {
list-style: none;
}
.dark_mode {
background-color: #191919;
color: #f1f1f1;
}
</style>
<script>
onload = (event) => {
const nav = document.querySelector('.nav');
const darkMode = document.querySelector('#btn_change');
const body = document.body;
darkMode.addEventListener('click', () => {
nav.classList.toggle('dark_nav');
body.classList.toggle('dark_mode');
});
}
</script>
</head>
<body>
<nav class="nav">
<ul class="menu_links">
<li>UNO</li>
<li>DUE</li>
<li>TRE</li>
</ul>
<div>
<button type="button" id="btn_change">CAMBIA MODALITA</button>
</div>
</nav>
<h2>H2</h2>
<p>Paragrafo</p>
<a href="">Link</a>
</body>
</html>
Enjoy!
html css javascript dark mode
Commentami!