# 🧪 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:
   ```javascript
   // 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.