Uma maneira de usar variáveis CSS hoje
Crie um site que suporte dinamicamente temas claros, escuros e coloridos.
Demonstração interativa
Crie uma cor de base que será alterada. Vincule-o ao tema de dados em html.
exemplos de código usam a sintaxe & from less / scss
html[data-theme='green'] { --theme-color: 110; }
Agora precisamos das cores em si. Ou melhor, seu brilho e saturação. Para fazer isso, usaremos o esquema hsl. Colocamos todas as variáveis em: root.
:root { --color: ~'hsl(var(--theme-color), 15%, 44%)'; --background-color: ~'hsl(var(--theme-color), 30%, 10%)'; }
Bem aqui. Estojo para pequenas. Pegue o elemento desejado e aplique nossa variável a ele.
.class-name { color: var(--color); background-color: var(--background-color); }
Agora vamos mudar o contraste. Substitua: root com html [with attribute].
// :root = html html { &[data-theme-style='normal'] { } &[data-theme-style='dark'] { } }
Agora, para cada tópico, assumimos nossos 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%)'; } }
Ligações:
Demonstração interativa
Obrigado Marcin Wichary pela idéia.