Tema claro y oscuro

#html #css #javascript

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");
})