Dark mode

Estratégias suportadas

O Tailwind permite dois modos de ativação do dark mode:

1. Modo baseado em sistema (`media`)

Ativado automaticamente se o sistema do usuário estiver no modo escuro.

2. Modo baseado em classe (`class`)

O desenvolvedor controla o dark mode aplicando manualmente a classe dark em um elemento superior (geralmente <html> ou <body>).

Habilitando o modo escuro

No tailwind.config.js:

module.exports = {
  darkMode: 'class', // ou 'media'
}

Usando `dark:` para variações

Após habilitar, você pode usar o prefixo dark: para definir estilos alternativos:

<div class="bg-white text-black dark:bg-gray-900 dark:text-white p-6">
  Este bloco muda de aparência no modo escuro
</div>

bg-white será substituído por bg-gray-900 no modo escuro
text-black será substituído por text-white

Exemplo com botão de alternância manual

<html class="dark">
<body class="bg-white dark:bg-black text-gray-800 dark:text-gray-100">
  <button onclick="document.documentElement.classList.toggle('dark')">
    Alternar modo
  </button>
</body>
</html>

Esse exemplo simples permite alternar entre claro e escuro adicionando ou removendo a classe dark.

Aplicações comuns com `dark:`

Texto: text-gray-900 dark:text-gray-100
Fundo: bg-white dark:bg-gray-900
Bordas: border-gray-300 dark:border-gray-600
Efeitos: shadow-md dark:shadow-lg

Melhores práticas

Utilize cores neutras como base (gray, zinc, slate) para uma transição suave entre os modos.
Teste a legibilidade de todos os textos em ambos os temas.
Considere aplicar dark mode em elementos específicos se o layout for híbrido.

O suporte ao modo escuro no Tailwind é altamente integrado ao sistema de utilitárias, permitindo que você mantenha a lógica visual no HTML, com responsividade e consistência.

Dark mode

Estratégias suportadas

1. Modo baseado em sistema (media)

2. Modo baseado em classe (class)