Método 1
CSS 🥳
:root {
/* Default (light) theme */
--background: white;
--color: black;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--background: black;
--color: white;
}
}
body {
background-color: var(--background);
color: var(--color);
}
Método 2
HTML 😎
<body class="dark-theme">
<button id="theme-toggle">🌓</button>
</body>
CSS 🥳
.light-theme {
background-color: white;
color: black;
}
.dark-theme {
background-color: black;
color: white;
}
JAVASCRIPT 👀
const toggleBtn = document.getElementById("theme-toggle");
toggleBtn.addEventListener("click", () => {
document.body.classList.toggle("light-theme");
document.body.classList.toggle("dark-theme");
})
Top comments (0)