# 🎨 Guia Rápido de Classes Dark Mode

## Classes Comuns para Substituir

### Backgrounds
```
bg-white          → bg-white dark:bg-gray-800
bg-gray-50        → bg-gray-50 dark:bg-gray-900
bg-gray-100       → bg-gray-100 dark:bg-gray-800
bg-gray-200       → bg-gray-200 dark:bg-gray-700
```

### Textos
```
text-gray-900     → text-gray-900 dark:text-gray-100
text-gray-800     → text-gray-800 dark:text-gray-200
text-gray-700     → text-gray-700 dark:text-gray-300
text-gray-600     → text-gray-600 dark:text-gray-400
text-gray-500     → text-gray-500 dark:text-gray-500
```

### Bordas
```
border-gray-200   → border-gray-200 dark:border-gray-700
border-gray-300   → border-gray-300 dark:border-gray-600
```

### Hover States
```
hover:bg-gray-50  → hover:bg-gray-50 dark:hover:bg-gray-700
hover:bg-gray-100 → hover:bg-gray-100 dark:hover:bg-gray-800
```

### Inputs
```
bg-white border-gray-300 text-gray-900
→
bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100
```

## Componentes Já Atualizados
- [x] Layout
- [x] Header
- [x] Sidebar
- [x] Button
- [x] Modal
- [x] ThemeToggle
- [x] Dashboard (parcial)

## Componentes Pendentes
- [ ] DatabookView
- [ ] Templates
- [ ] Configurações
- [ ] Todos os formulários
- [ ] Todas as tabelas