CSS : variables (custom properties) et mode sombre automatique

Variables

:root { --fond: #fff; --texte: #1f2937; --accent: #f97316; }
body { background: var(--fond); color: var(--texte); }
.bouton { background: var(--accent, orange); }   /* valeur de secours */

Mode sombre

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --fond: #0b0f19; --texte: #e5e7eb; }
}
:root[data-theme="dark"] { --fond: #0b0f19; --texte: #e5e7eb; }

Bouton

bouton.addEventListener("click", () => {
  const t = document.documentElement.dataset.theme === "dark" ? "light" : "dark";
  document.documentElement.dataset.theme = t;
  localStorage.setItem("theme", t);
});

Voir localStorage. Ajoutez color-scheme: light dark; pour que les formulaires et barres de défilement suivent.