Addon · Couleurs
Couleurs propulsées OKLCH avec variantes automatiques d'opacité, de luminosité et d'obscurité. Faites glisser les balles du logo pour remixer la teinte brand.
Trois nombres — trois teintes — génèrent tout le système ci-dessous.
5 couleurs de base × 8 variantes. Même schéma de nommage, à chaque fois.
_c-brand /* couleur */ _bg-brand /* fond */ _bc-brand /* bordure */
brand /* plein */ brand_ /* 65% */ brand__ /* 35% */ brand___ /* 5% */
brand-d /* plus sombre */ brand-b /* plus clair */ brand-d_ /* sombre profond */ brand-b_ /* clair vif */
Un pivot, deux variables. Les mêmes tokens --dark et --light permutent leur luminosité automatiquement — les composants restent agnostiques au mode. OKLCH garde le chroma et la teinte intacts ; seul le canal L bascule.
Deux variables CSS pilotent l'inversion complète du mode. Tout le reste lit depuis elles.
/* Mode clair (défaut) */ --current-lightness: 96.4%; --current-darkness: 6.4%; /* Mode sombre — quand .toggle-theme est actif */ --current-lightness: 5%; --current-darkness: 95%;
--dark et --light référencent le pivot. Inversez le pivot, tous les consommateurs basculent d'un coup — même chroma et même teinte OKLCH, luminosité inversée.
--dark-lightness: var(--current-darkness); --dark-chroma: 0.05; --dark-hue: var(--brand-hue); --light-lightness: var(--current-lightness); --light-chroma: 0.01; --light-hue: var(--brand-hue);
Même markup, mêmes tokens. Seuls --current-lightness et --current-darkness changent entre les deux cartes.
Ajoutez la classe toggle-theme sur le body. EVA inverse aussi les offsets de luminosité, donc le modificateur -d reste assombrissant et -b reste éclaircissant à l'œil.
<body class="current-theme theme-eva toggle-theme">
Passez $auto-theme-switch: true à la config SCSS. EVA génère une media query prefers-color-scheme: dark qui inverse le pivot pour vous — pas de JS, pas de classe.
@use 'eva-css-fluid' with ( $auto-theme-switch: true );
Écrivez _c-dark _bg-light et oubliez les modes. Le pivot s'occupe du reste — votre code de composant reste identique dans les deux états.
Essayez — cliquez l'icône soleil en haut à droite de cette page. Toutes les nuances ci-dessus basculent d'un coup.
Bases OKLCH, switching de thème, formules de contraste. Plus l'outil auto-theme pour extraire des palettes depuis des images.