Como Configurar Tema Claro e Escuro com Tailwind CSS
📌 Navegue por tópicos
Intradução
No post anterior, vimos a lógica em JavaScript para persistir o tema no
localStorage. Porém, para que essa troca aconteça na prática de forma visual e elegante, precisamos entender como as classes de estilo conversam com os dois modos de exibição.Neste artigo da série do AqGoEs DeV, vamos detalhar como a paleta de cores do nosso header foi pensada para garantir contraste, legibilidade e harmonia visual tanto no Modo Claro quanto no Modo Escuro.
O Conceito de Cores Dinâmicas e Semânticas
Em vez de fixar tons hexadecimais brutos diretamente no HTML (como #ffffff ou #000000), a abordagem ideal é utilizar nomes semânticos ou aplicar a variante dark: nativa do Tailwind CSS.
No cabeçalho do projeto onde.html, utilizamos utilitários customizados como bg-header, border-subtle, bg-secondary e text-primary. Essa camada semântica permite que o layout mude de aparência apenas alternando a classe .dark no elemento raiz <html>.
Mapeamento da Paleta de Cores do Header
Confira abaixo como cada elemento visual do header reage e se adapta dependendo do tema ativo:
| Elemento do Header | Modo Claro (Light Mode) | Modo Escuro (Dark Mode) | Função na Interface |
| Fundo do Header | Fundo claro com transparência | Fundo escuro com transparência | Preserva a visibilidade do backdrop-blur-md. |
| Borda Inferior | Cinza muito claro (border-gray-200) | Cinza escuro/grafite (border-gray-800) | Delimita a separação entre header e conteúdo. |
| Texto dos Links | Cinza escuro (text-gray-700) | Cinza claro (text-gray-200) | Garante taxa de contraste adequada para leitura. |
| Botões e Ícones | Fundo cinza suave (bg-gray-100) | Fundo escuro intermediário (bg-gray-800) | Dá destaque tátil ao botão de alternância e menu. |
| Ponto e Acentos | Cor da Marca (Brand Color) | Cor da Marca (Brand Color) | Mantém a identidade visual fixa independente do tema. |
Estrutura do Código HTML com as Variantes de Tema
Para que o Tailwind CSS entenda essa transição automaticamente, estruturamos os seletores de classe aproveitando a diretiva dark:. Veja a diferença aplicada diretamente nos elementos:
<!-- Exemplo de estrutura adaptável para Dark/Light Mode -->
<!-- Header com fundo e borda dinâmicos -->
<header class="bg-white/80 dark:bg-gray-900/80 border-gray-200 dark:border-gray-800 backdrop-blur-md transition-colors duration-300">
<!-- Links com estado hover adaptativo -->
<a href="index.html" class="text-gray-700 dark:text-gray-200 hover:text-brand dark:hover:text-brand transition-colors">
Home
</a>
<!-- Botão Toggle de Tema -->
<button class="bg-gray-100 dark:bg-gray-800 border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-100 p-2.5 rounded-full">
<!-- Ícone altera via JS trocando a classe 'hidden' -->
</button>
</header>Destaques de UI/UX no Design de Temas
💡 Dica de Ouro: Nunca utilize preto puro (
#000000) para o fundo no Modo Escuro, nem branco puro (#ffffff) com texto preto 100% no Modo Claro. O contraste extremo causa fadiga visual. Opte por tons de cinza fechados (como#0f172aou#121212) para o tema escuro e cinzas suaves para o texto.
1 – Suavidade nas Transições
Ao adicionar a classe transition-colors duration-300 nos elementos chave do header, a troca de cores entre os modos não acontece de forma seca, mas sim através de uma transição suave de 300 milissegundos.
2 – Preservação do Efeito Glassmorphism
O segredo do efeito translúcido (backdrop-blur-md) é trabalhar com opacidade no fundo. No tema claro usamos um fundo branco com 80% de opacidade (bg-white/80), enquanto no tema escuro utilizamos um fundo escuro com a mesma taxa de transparência (dark:bg-gray-900/80).
Conclusão
A escolha consciente de cores para o Modo Claro e Escuro vai além da estética: é um compromisso com a acessibilidade e o conforto de navegação do usuário final. Com as utilitárias do Tailwind CSS, essa implementação se torna modular e fácil de manter em todo o projeto.
💡 Veja também
