[FEATURE] Toggle de tema escuro/claro

[lumamontes]

Contexto

O pacote next-themes já está instalado no projeto, mas não está integrado. A plataforma usa apenas um tema fixo.

Objetivo

Implementar suporte a tema escuro e claro com toggle acessível na navbar.

Funcionalidades esperadas

• Botão de toggle na navbar para alternar entre temas
• Respeitar preferência do sistema operacional por padrão
• Persistir a escolha do usuário (localStorage)
• Transição suave entre temas

Critérios de aceitação

• next-themes integrado com o ThemeProvider no layout
• Tokens CSS definidos para ambos os temas (claro e escuro)
• Todos os componentes existentes funcionam nos dois temas
• Toggle visível e acessível na navbar
• Sem flash de tema errado no carregamento (FOUC)
• Segue o design system neobrutalism em ambos os temas

Dicas técnicas

• next-themes já está no package.json de apps/web
• Tokens de cor: apps/web/src/app/globals.css
• Navbar: apps/web/src/components/nav-bar/
• Layout root: apps/web/src/app/layout.tsx
• Definir variantes dos tokens CSS com [data-theme="dark"] ou @media (prefers-color-scheme: dark)

Nível de dificuldade

🟢 Bom para primeira contribuição — a dependência já está instalada, é configurar e definir os tokens.