Guia de Cores — Light e Dark Mode

Sistema de cor

Background/foreground: usar as variáveis CSS bg-background e text-foreground — tratam light/dark automaticamente pelo ThemeLoader.
Demais cores: Tailwind com dark: prefix manual (modo escuro é via classe .dark no elemento <html>).

Mapeamento de cores

Elemento	Light	Dark
Texto primário	`text-gray-900`	`dark:text-gray-100`
Texto secundário	`text-gray-500`	`dark:text-gray-400`
Texto terciário/muted	`text-gray-400`	`dark:text-gray-500`
Separadores finos	`text-gray-300`	`dark:text-gray-600`
Bordas padrão	`border-gray-200`	`dark:border-gray-700`
Bordas de badge/chip	`border-gray-300`	`dark:border-gray-600`
Hover de link	`hover:text-gray-900`	`dark:hover:text-white`
Hover de badge	`hover:border-gray-500`	`dark:hover:border-gray-400`
Hover de texto muted	`hover:text-gray-600`	`dark:hover:text-gray-300`

Backgrounds

Elemento	Light	Dark
Fundo da página	`bg-background` (auto)	(auto)
Barra do topo	`bg-primary`	`dark:bg-black`
Footer	`bg-gray-100/50`	`dark:bg-secondary/50`
Texto no footer	`text-black/50`	`dark:text-white/50`

Botão primário (submit)

Usar o componente BaseButton (variante primary) do design system — ele já trata light/dark via variáveis de cor do projeto, sem necessidade de overrides. Ver components.md.

Padrão de uso

Todo gray-* que for texto, borda ou hover deve ganhar a contraparte dark: correspondente segundo a tabela acima. Exemplo prático:

<!-- Títulos -->
<h2 class="text-gray-900 dark:text-gray-100">Título</h2>

<!-- Texto descritivo -->
<p class="text-gray-500 dark:text-gray-400">Descrição</p>

<!-- Links -->
<a class="text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:underline">Link</a>

<!-- Bordas/separadores -->
<section class="border-t border-gray-200 dark:border-gray-700">

Erros

text-gray-900/dark:text-gray-100 — texto principal
text-gray-500/dark:text-gray-400 — texto secundário
text-gray-400/dark:text-gray-500 — texto terciário
Use a prop error do BaseInput para exibir mensagens de erro nos formulários.

Design system

A UI é construída sobre o design system próprio (src/components/base/) + Tailwind CSS. Não há PrimeVue no projeto.

BaseButton: variantes primary/secondary/ghost/danger, já tratam light/dark.
BaseInput: campo com label, hint e error integrados.
BaseBadge: variantes default/success/danger/info/warning/violet.

Detalhes de props e exemplos em components.md. Para cores que não vêm dos componentes base, aplicar Tailwind com o prefixo dark: segundo as tabelas acima.

style.md 2.8 KB História Raw