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 Button do PrimeVue com estilo default — ele já suporta dark mode via tema do projeto, sem necessidade de overrides.

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 o componente Message com severity="error" do PrimeVue para mensagens de erro nos formulários

Componentes PrimeVue

Button: usar componente sem overrides de cor — segue o tema do projeto.
InputText, Password, Message: seguem o tema via variáveis CSS do PrimeVue, já suportam dark mode.
Não aplicar bg-gray-900! ou outras overrides manuais diretamente nos componentes PrimeVue.

style.md 2.5 KB Verlauf Originalformat