dbmaker/docs/auxiliar/DARK_MODE_CLASSES.md

🎨 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

• Layout
• Header
• Sidebar
• Button
• Modal
• ThemeToggle
• Dashboard (parcial)

Componentes Pendentes

• DatabookView
• Templates
• Configurações
• Todos os formulários
• Todas as tabelas