Une façon d'utiliser les variables CSS aujourd'hui
Créez un site qui prend en charge dynamiquement les thèmes clair, sombre et couleur.
Démo interactive
Créez une couleur de base qui changera. Liez-le à data-theme en html.
les exemples de code utilisent la syntaxe & from less / scss
html[data-theme='green'] { --theme-color: 110; }
Maintenant, nous avons besoin des couleurs elles-mêmes. Ou plutôt leur luminosité et leur saturation. Pour ce faire, nous utiliserons le schéma hsl. Nous mettons toutes les variables dans: root.
:root { --color: ~'hsl(var(--theme-color), 15%, 44%)'; --background-color: ~'hsl(var(--theme-color), 30%, 10%)'; }
Eh bien ici. Étui pour petit. Saisissez l'élément souhaité et appliquez-lui notre variable.
.class-name { color: var(--color); background-color: var(--background-color); }
Maintenant, nous allons changer le contraste. Remplacez: root par html [avec attribut].
// :root = html html { &[data-theme-style='normal'] { } &[data-theme-style='dark'] { } }
Maintenant, pour chaque sujet, nous prenons nos valeurs s, l.
html { &[data-theme-style='normal'] { --color: ~'hsl(var(--theme-color), 15%, 44%)'; --background-color: ~'hsl(var(--theme-color), 30%, 10%)'; } &[data-theme-style='dark'] { --color: ~'hsl(var(--theme-color), 70%, 31%)'; --background-color: ~'hsl(var(--theme-color), 3%, 3%)'; } }
Liens:
Démo interactive
Merci Marcin Wichary pour l'idée.