CSS light-dark() : Le Dark Mode natif simplifié
Simplifier la gestion des thèmes
Jusqu'à présent, gérer le mode sombre demandait des blocs @media (prefers-color-scheme: dark) verbeux ou des classes JavaScript .dark-mode partout.
La nouvelle fonction light-dark() permet de définir les deux valeurs directement dans la propriété, en fonction du color-scheme déclaré.
Exemple pratique
:root {
/* Indique au navigateur qu'on supporte les deux modes */
color-scheme: light dark;
}
.card {
/* Syntaxe : light-dark(valeurClair, valeurSombre) */
background-color: light-dark(#ffffff, #1a1a1a);
color: light-dark(#333333, #f0f0f0);
border: 1px solid light-dark(#ccc, #555);
}