Implementando Dark Mode com Next.js 15 e Tailwind CSS

O dark mode se tornou uma funcionalidade essencial em aplicações modernas. Além de proporcionar uma melhor experiência visual em ambientes com pouca luz, também pode ajudar a economizar bateria em dispositivos com telas OLED.

Configuração Inicial

Primeiro, vamos configurar o next-themes para gerenciar os temas da aplicação.

Instalação

Instale a dependência necessária:

npm install next-themes

Configuração do Tailwind

Configure o Tailwind CSS para suportar dark mode no arquivo tailwind.config.js:

Implementação do Provider

Crie um componente ThemeProvider para envolver sua aplicação e gerenciar o estado do tema.

Toggle de Tema

Implemente um botão para alternar entre os temas claro e escuro.

Persistência do Tema

O next-themes automaticamente persiste a preferência do usuário no localStorage, garantindo que o tema escolhido seja mantido entre sessões.

Melhores Práticas

1. Respeite a Preferência do Sistema

Configure o tema padrão como 'system' para respeitar a preferência do sistema operacional do usuário.

2. Evite Flash de Conteúdo

Use o atributo suppressHydrationWarning para evitar o flash de conteúdo durante a hidratação.

3. Teste em Ambos os Temas

Sempre teste sua aplicação em ambos os temas para garantir boa legibilidade e contraste.

Conclusão

Implementar dark mode com Next.js 15 e Tailwind CSS é simples e proporciona uma excelente experiência do usuário. A combinação dessas ferramentas oferece uma solução robusta e performática.