dbmaker/docs/auxiliar/TESTE_DARK_MODE.md

🧪 Guia de Teste - Dark Mode

📋 Como Testar o Dark Mode

1. Ativar/Desativar Dark Mode

• Clique no ícone de Sol/Lua no header (canto superior direito)
• O tema deve mudar instantaneamente
• A preferência é salva automaticamente

2. Áreas para Testar

✅ Página de Configurações

• Título "Configurações" visível e com contraste
• Tabs com cores apropriadas
• Conteúdo das abas com dark mode

✅ Aba: Pastas e Documentos

• Tabela com linhas visíveis
• Headers com contraste
• Botões com cores apropriadas
• Modal de criação com dark mode

✅ Aba: Categorias

• Cards com dark mode
• Ícones visíveis
• Botões com cores apropriadas
• Modal com dark mode

✅ Aba: Usuários

• Tabela com linhas visíveis
• Status badges com cores apropriadas
• Ícones visíveis

✅ Aba: Logs

• Tabela com linhas visíveis
• Ícones de status com cores
• Textos com contraste

✅ Aba: Integrações IA

• Cards com dark mode
• Ícones visíveis
• Botões com cores apropriadas
• Modal com dark mode

✅ Página de Busca

• Input com dark mode
• Placeholder visível
• Mensagens com contraste

✅ Criar Template (3 Painéis)

• Painel 1: Dados Básicos
  • Inputs com dark mode
  • Textarea com dark mode
  • Radio buttons com textos visíveis
• Painel 2: Seleção de Tópicos
  • Cards de tópicos com dark mode
  • Checkboxes visíveis
  • Hover states funcionando
• Painel 3: Revisar e Salvar
  • Fundo com dark mode
  • Textos com contraste
  • Botões visíveis

✅ Editar Projeto (DatabookEdit)

• Inputs com dark mode
• Selects com dark mode
• Painel de informações com dark mode
• Botões com cores apropriadas

✅ Databook View (Preview)

• Painel esquerdo (Índice)
  • Fundo com dark mode
  • Textos com contraste
  • Hover states funcionando
  • Seleção visível
• Painel direito (Documentos)
  • Cards de documentos com dark mode
  • Ícones visíveis
  • Botões com cores apropriadas
  • Hover states funcionando
• Modal de Upload
  • Fundo com dark mode
  • Textos com contraste
  • Inputs com dark mode
• Modal de Preview
  • Fundo com dark mode
  • Textos com contraste
  • Imagens visíveis

✅ Design do Databook

• Filtros com dark mode
• Cards de templates com dark mode
• Botões com cores apropriadas
• Modal de edição com dark mode

🎨 Checklist de Contraste

Para cada elemento, verificar:

• Texto legível em dark mode
• Fundo apropriado (não branco)
• Bordas visíveis
• Ícones com cores apropriadas
• Hover states visíveis
• Focus states visíveis

🔍 Verificação de Cores

Modo Claro

• Fundo: Branco (#FFFFFF)
• Texto: Cinza escuro (#111827)
• Bordas: Cinza claro (#E5E7EB)
• Primária: Azul (#1E40AF)

Modo Escuro

• Fundo: Cinza muito escuro (#111827)
• Texto: Cinza claro (#F9FAFB)
• Bordas: Cinza escuro (#374151)
• Primária: Azul claro (#60A5FA)

📱 Testes em Diferentes Dispositivos

• Desktop (1920x1080)
• Tablet (768x1024)
• Mobile (375x667)

🌙 Testes de Preferência do Sistema

1. Abrir DevTools (F12)
2. Ir para Console
3. Executar:

   // Simular preferência do sistema para dark mode
   window.matchMedia('(prefers-color-scheme: dark)').matches
   

4. Verificar se o tema muda automaticamente

✅ Checklist Final

• Todas as páginas testadas
• Todos os componentes com dark mode
• Contraste adequado em todas as áreas
• Hover states funcionando
• Modals com dark mode
• Tabelas com dark mode
• Cards com dark mode
• Inputs com dark mode
• Selects com dark mode
• Textareas com dark mode
• Ícones com cores apropriadas
• Badges com dark mode
• Botões com dark mode
• Bordas visíveis
• Textos legíveis

🐛 Problemas Conhecidos

Se encontrar algum problema:

1. Verificar se a classe dark: foi aplicada
2. Verificar se o Tailwind está compilando
3. Limpar cache do navegador (Ctrl+Shift+Delete)
4. Recarregar a página (Ctrl+R)

📝 Relatório de Testes

Ao testar, anote:

• Data do teste
• Navegador utilizado
• Resolução da tela
• Problemas encontrados
• Sugestões de melhoria

---

Dica: Use a ferramenta de inspeção do navegador (F12) para verificar as classes aplicadas aos elementos.