.jpeg)
🌗 Tema Claro e Escuro com Variáveis CSS
Se você já trabalhou com Sass ou LESS, provavelmente lembra de usar variáveis para armazenar cores e reaproveitar em vários lugares do código. A grande novidade é que hoje o próprio CSS já oferece variáveis nativas, chamadas de CSS Custom Properties.
Essas variáveis são declaradas com dois traços (--) e podem ser acessadas com var(--nome). O legal é que elas são dinâmicas: você pode alterar o valor delas em tempo de execução, inclusive via JavaScript.
📝 Exemplo prático: modo claro/escuro
Com poucas linhas, conseguimos criar um tema claro e um tema escuro apenas mudando os valores das variáveis:
:root {
--bg: #ffffff;
--text: #111111;
--card: #f3f4f6;
--accent: #06b6d4;
}
body.dark {
--bg: #0f1724;
--text: #e6eef6;
--card: #0b1220;
--accent: #06b6d4;
}
body {
background: var(--bg);
color: var(--text);
transition: background 0.3s, color 0.3s;
}
Basta trocar a classe do <body> para .dark e todas as cores do site mudam automaticamente. 🎉
🔄 Alternando o tema com JavaScript
Com uma simples função, você pode alternar o tema ao clicar em um botão:
function toggleTheme() {
document.body.classList.toggle("dark");
}
🚀 Por que usar variáveis CSS?
- Mais organização: centraliza as cores e estilos principais em um só lugar.
- Facilidade de manutenção: quer mudar a cor de destaque? Basta alterar uma linha.
- Flexibilidade: dá para mudar temas em tempo real com CSS ou JavaScript.
- Compatibilidade: hoje em dia funciona em todos os navegadores modernos.
👉 Essa técnica é usada em praticamente todos os dashboards e sites modernos que oferecem modo claro e escuro.
Comentários
Postar um comentário