175 lines
4.4 KiB
Markdown
175 lines
4.4 KiB
Markdown
# 🧪 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.
|