Variáveis CSS para temas
Declare propriedades personalizadas com --, use var(), substitua-as em escopos aninhados e implemente um alternador de tema claro/escuro.
Variáveis CSS para temas é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que são propriedades personalizadas do CSS?
As propriedades personalizadas do CSS (variáveis CSS) armazenam valores que podem ser reutilizados em uma folha de estilos. Elas são declaradas com --name: value e acessadas com var(--name). Diferentemente das variáveis de pré-processadores, como as do Sass, elas são dinâmicas — você pode atualizá-las com JavaScript.
Declarando propriedades personalizadas
Declare as propriedades em :root para torná-las disponíveis globalmente. Você também pode declará-las em qualquer elemento para limitá-las ao escopo da subárvore desse elemento.
:root {
--color-primary: #3182ce;
--color-bg: #f7fafc;
--color-text: #1a202c;
--spacing-md: 16px;
--border-radius: 8px;
--font-sans: 'Inter', system-ui, sans-serif;
}Usando propriedades personalizadas
Faça referência a uma variável com var(--name). Inclua um fallback como segundo argumento: var(--color-primary, #3182ce). O fallback será usado se a variável não estiver definida.
.card {
background: var(--color-bg);
color: var(--color-text);
padding: var(--spacing-md);
border-radius: var(--border-radius);
}
.btn {
background: var(--color-primary, blue); /* fallback */
}A cascata: variáveis com escopo
As propriedades personalizadas entram na cascata e são herdadas. Se você redefinir uma variável em um elemento filho, ela substituirá o valor do elemento pai para esse elemento e todos os seus descendentes.
:root { --accent: blue; }
.card { color: var(--accent); } /* blue */
.special-section {
--accent: green; /* override for this subtree */
}
.special-section .card { color: var(--accent); } /* green */Modo escuro com variáveis CSS
O padrão mais simples para o modo escuro é definir paletas de cores claras e escuras como variáveis CSS. Alterne uma classe ou use a consulta de mídia prefers-color-scheme para fazer a troca. Não é necessário substituir propriedades de cor individuais.
:root {
--bg: #ffffff;
--text: #1a202c;
--card-bg: #f7fafc;
}
[data-theme='dark'], @media (prefers-color-scheme: dark) {
:root {
--bg: #1a202c;
--text: #f7fafc;
--card-bg: #2d3748;
}
}
body { background: var(--bg); color: var(--text); }Alternando o modo escuro com JavaScript
Adicione um botão de alternância que troque um atributo de dados ou uma classe no elemento raiz. As variáveis CSS cuidam do restante — uma linha de JavaScript, sem substituições de estilos individuais.
const btn = document.querySelector('#theme-toggle');
btn.addEventListener('click', () => {
const current = document.documentElement.getAttribute('data-theme');
document.documentElement.setAttribute(
'data-theme',
current === 'dark' ? 'light' : 'dark'
);
});Atualizando variáveis com JavaScript
element.style.setProperty('--name', value) atualiza uma propriedade personalizada em linha. Removê-la com removeProperty restaura o valor da cascata. Isso permite criar temas dinâmicos e valores animados.
// Dynamically set a CSS variable from JS:
document.documentElement.style.setProperty('--primary-hue', '220');
// Based on input:
const hue = document.querySelector('#hue-slider');
hue.addEventListener('input', () => {
document.documentElement.style.setProperty('--primary-hue', hue.value);
});Tokens de design como variáveis CSS
Defina todas as decisões de design — paleta de cores, escala de espaçamento, escala tipográfica — como variáveis CSS. Isso cria uma única fonte de verdade que os componentes utilizam. Alterar um token o propaga instantaneamente para todos os lugares.
:root {
/* Colour scale */
--blue-50: #ebf8ff;
--blue-100: #bee3f8;
--blue-500: #3182ce;
--blue-900: #1a365d;
/* Spacing scale */
--space-1: 4px;
--space-2: 8px;
--space-4: 16px;
--space-8: 32px;
}Usando variáveis em calc()
As variáveis CSS funcionam dentro de calc(), permitindo cálculos responsivos baseados nos valores dos tokens.
:root { --header-height: 64px; }
.content {
/* Leave room for fixed header */
padding-top: calc(var(--header-height) + 24px);
min-height: calc(100vh - var(--header-height));
}Compatibilidade com navegadores
As propriedades personalizadas do CSS são compatíveis com todos os navegadores modernos (desde 2016 nos principais navegadores). Não é necessário usar um pré-processador para esse recurso. Alternativa para navegadores muito antigos: forneça um valor estático antes de var().
.btn {
background: blue; /* IE fallback */
background: var(--color-primary); /* modern browsers */
}Propriedades personalizadas do CSS vs variáveis Sass
As variáveis Sass são compiladas em valores estáticos. As propriedades personalizadas do CSS existem em tempo de execução, são dinâmicas, podem ser alteradas com JavaScript e percorrem a cascata do DOM. Use variáveis CSS para temas e variáveis Sass para constantes definidas durante a compilação.
Verificação rápida
Como ler e atualizar uma propriedade personalizada do CSS a partir de JavaScript?
Recapitulação: propriedades personalizadas do CSS
Declare com -- em :root para obter um escopo global. Use com var(). As variáveis com escopo definido percorrem a cascata até os descendentes. Modo escuro: redefina os tokens de cor em uma consulta de mídia ou em um atributo de dados. Atualize a partir de JavaScript com style.setProperty(). Tokens de design como variáveis = uma única fonte de verdade.
Perguntas Frequentes
A aula “Variáveis CSS para temas” é grátis?
Sim — o texto completo de “Variáveis CSS para temas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Variáveis CSS para temas”?
Declare propriedades personalizadas com --, use var(), substitua-as em escopos aninhados e implemente um alternador de tema claro/escuro. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Variáveis CSS para temas”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Aprofundamento em Flexbox: alinhamento, quebra e ordem
- CSS Grid: template-areas auto-fit minmax
- Combinando Flexbox e Grid
- Variáveis CSS para temas