Una forma de usar variables CSS hoy
Cree un sitio que admita dinámicamente temas claros, oscuros y de color.
Demo interactiva
Crea un color base que cambiará. Añádelo al tema de datos en html.
ejemplos de código usan y desde menos / sintaxis scss
html[data-theme='green'] { --theme-color: 110; }
Ahora necesitamos los colores mismos. O más bien su brillo y saturación. Para hacer esto, usaremos el esquema hsl. Ponemos todas las variables en: root.
:root { --color: ~'hsl(var(--theme-color), 15%, 44%)'; --background-color: ~'hsl(var(--theme-color), 30%, 10%)'; }
Bueno aqui. Estuche para pequeño. Agarra el elemento deseado y aplica nuestra variable a él.
.class-name { color: var(--color); background-color: var(--background-color); }
Ahora cambiaremos el contraste. Reemplazar: root con html [con atributo].
// :root = html html { &[data-theme-style='normal'] { } &[data-theme-style='dark'] { } }
Ahora para cada tema tomamos nuestros valores 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%)'; } }
Enlaces:
Demo interactiva
Gracias Marcin Wichary por la idea.