Temas

Tema Pharos, dark mode e customização.

Temas

Um tema Pharos é um conjunto de overrides de CSS custom properties + (opcionalmente) ícones e variantes de componente.

Tema oficial

pnpm add @pharos-ds/theme-pharos

import {Theme} from '@pharos-ds/core/theme';
import {pharosTheme} from '@pharos-ds/theme-pharos/built';
import '@pharos-ds/theme-pharos/theme.css';
 
<Theme theme={pharosTheme} mode="dark">
  {children}
</Theme>

Camadas CSS

reset.css — normalização
pharos.css — estilos dos componentes
theme.css — tokens da marca

Dark mode

mode="light" / mode="dark" / mode="system"
O tema define tokens onDark para superfícies escuras
Sincronize data-theme no <html> via o próprio <Theme> (modo root)

Customizar

Use a CLI para gerar CSS a partir de um tema TypeScript:

pnpm pharos -- theme build src/themes/meuTema.ts --out src/themes/meuTema.css

Overrides pontuais também funcionam com className e CSS variables nos componentes.

Veja a página /temas para um overview visual.