Variáveis CSS para temas
Crie um sistema de temas baseado em tokens usando propriedades personalizadas de CSS que alternem entre valores claros e escuros.
Variáveis CSS para temas é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 2 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 CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
Visão geral da arquitetura de temas
As propriedades personalizadas do CSS são a base da criação moderna de temas em CSS. Elas funcionam como uma camada de tokens dinâmica que pode ser trocada em tempo de execução, permitindo o modo dark, produtos de marca branca e personalização controlada pelo usuário.
Camadas de tokens de design
Um sistema de temas bem estruturado tem três camadas:
- Tokens primitivos: valores brutos (
--blue-500: #3b82f6) - Tokens semânticos: baseados no significado (
--color-primary: var(--blue-500)) - Tokens de componentes: específicos de componentes (
--button-bg: var(--color-primary))
Definindo o tema claro
Defina o tema claro completo em :root:
<div class="demo">Themed surface<br/><button class="btn">Primary Button</button></div>
Substituição do tema dark
Substitua os tokens em um escopo dark, usando uma consulta de mídia ou uma classe:
<div class="demo">Adapts to dark mode automatically</div>
Usando tokens nos componentes
Os componentes usam tokens semânticos, nunca valores fixos:
<div class="card">Card using theme tokens</div>
Substituição baseada em classe
Permita a substituição manual usando uma classe em <html>:
<div data-theme="dark" class="demo">Dark theme via data-theme</div>
<div data-theme="light" class="demo">Light theme via data-theme</div>
Criação de temas no nível do componente
Um componente pode definir sua própria camada de tokens para permitir uma personalização mais detalhada:
<div class="card">Component-level theming</div>
Criação de temas de marca branca
As variáveis CSS permitem criar produtos de marca branca, nos quais cada cliente recebe um tema diferente ao substituir um pequeno conjunto de tokens da marca:
<div data-brand="client-a" class="brand-demo">Client A brand color</div>
<div data-brand="client-b" class="brand-demo">Client B brand color</div>
Transição entre alterações de tema
É possível obter transições suaves entre temas usando uma transição CSS nas propriedades relacionadas a cores:
<div class="demo" id="theme-demo">Themed content</div>
<button onclick="document.documentElement.classList.toggle('theme-transitioning'); const d=document.getElementById('theme-demo'); const dark = d.style.background==='rgb(17, 17, 17)'; d.style.background = dark ? '#fff' : '#111'; d.style.color = dark ? '#111' : '#fff';">Toggle Theme (transitions smoothly)</button>
Documentação dos tokens
Documente seus tokens de design para que todos os desenvolvedores saibam quais variáveis usar. Um componente de guia de estilos, como o Storybook, que exiba todos os tokens com seus valores claro e dark é indispensável para equipes grandes.
Ferramentas para tokens: Style Dictionary
O Style Dictionary, da Amazon, transforma automaticamente tokens de design definidos em JSON em propriedades personalizadas do CSS, constantes de JavaScript e outros formatos de plataforma, mantendo os tokens sincronizados entre o design e o código.
Verificação rápida
Em uma arquitetura de tokens com dois níveis, a qual tipo de token um componente .button deve fazer referência para sua cor de fundo?
Recapitulação
As variáveis CSS permitem criar sistemas robustos de temas. Crie três camadas: tokens primitivos, tokens semânticos e tokens de componentes. Defina os temas como substituições de tokens em :root, usando uma consulta de mídia ou um seletor de atributo. Use tokens semânticos nos componentes para obter herança automática do tema. Ferramentas como o Style Dictionary automatizam a distribuição de tokens entre plataformas.
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 CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Variáveis CSS para temas”?
Crie um sistema de temas baseado em tokens usando propriedades personalizadas de CSS que alternem entre valores claros e escuros. Você pratica CSS 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 CSS Academy?
Nenhuma experiência prévia é necessária. CSS 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 2 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 CSS Academy?
Sim. Cada aula de CSS 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
- Consulta de mídia prefers-color-scheme
- Variáveis CSS para temas
- Propriedade color-scheme
- Alternância automática e manual do modo escuro