Addon · Couleurs
Une teinte. Seize nuances.
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.
Teinte en direct
Trois nombres — trois teintes — génèrent tout le système ci-dessous.
Toutes les nuances
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 */
Sombre / Clair
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.
Toutes les variantes, toutes les formules — dans /llms.txt.
Bases OKLCH, switching de thème, formules de contraste. Plus l'outil auto-theme pour extraire des palettes depuis des images.