# Temas

> createOonTheme, tokens semânticos, densidade, contraste e troca de tema em runtime com useOonTheme.

A identidade visual padrão das Centrais — azul operacional, superfícies claras, tipografia Poppins e alta densidade — está em `oonDefaultTheme`. Cada App pode estendê-la com tokens do Chakra UI v3, sem CSS remoto.

```ts title="frontend/src/app/theme.ts"
import { createOonTheme, oonDefaultTheme } from "@oondemand/oon-core-front/theme";

export const theme = createOonTheme({
  id: "minha-central",
  label: "Minha Central",
  extends: oonDefaultTheme,
  density: "comfortable",   // "compact" | "comfortable"
  contrast: "standard",     // "standard" | "high"
  config: {
    theme: {
      tokens: {
        colors: { brand: { 500: { value: "#176B87" }, 600: { value: "#10536A" } } },
      },
    },
  },
});
```

| Propriedade | Descrição |
|---|---|
| `id` | **Obrigatório.** Minúsculas, números e hífen |
| `label` | Nome exibido em seletores |
| `extends` | Tema base (não pode estender a si mesmo) |
| `density` | `compact` reduz fonte e altura de controles |
| `contrast` | `high` reforça texto e bordas |
| `config` | Configuração pública do Chakra (`theme.tokens`, `semanticTokens`, `globalCss`) |

## Tokens semânticos

| Grupo | Tokens |
|---|---|
| `brand` | `solid`, `contrast`, `fg`, `muted`, `subtle`, `emphasized`, `focusRing` (+ escala `brand.25…900`) |
| `surface` | `canvas`, `panel`, `elevated`, `hover` (0.7.35) |
| `text` | `primary`, `muted`, `inverse` |
| `border` | `default`, `strong` |
| `status` | `success`, `warning`, `danger`, `info` |

Desde a 0.7.35 os tokens semânticos do tema padrão têm valor escuro (`_dark`) e o shell — menu lateral, cabeçalho e tela de carregamento — usa apenas tokens semânticos, acompanhando um tema escuro (classe `dark` no `<html>`). Apps que já definem esses tokens mantêm os seus.

Use-os nos seus componentes Chakra: `color="text.muted"`, `bg="surface.panel"`, `borderColor="border.default"`.

## Vários temas e troca em runtime

```tsx title="frontend/src/app/app.tsx"
export const app = defineOonApp({
  // ...
  themes: [claro, escuro],
  defaultThemeId: claro.id,
});
```

```tsx title="frontend/src/components/ThemeToggle.tsx"
import { useOonTheme } from "@oondemand/oon-core-front/theme";

export function ThemeToggle() {
  const { themes, currentThemeId, setTheme } = useOonTheme();
  return (
    <select value={currentThemeId} onChange={(e) => setTheme(e.target.value)} aria-label="Tema">
      {themes.map((t) => <option key={t.id} value={t.id}>{t.label ?? t.id}</option>)}
    </select>
  );
}
```

A preferência fica local ao navegador (`localStorage`, chave `oon:theme:<app.id>`). Registre o seletor no slot `topbarEnd` para colocá-lo no cabeçalho do Core.

> [!TIP]
> Este site usa exatamente esse mecanismo: dois temas (`site-dark` e `site-light`) registrados em `themes`, alternados por `useOonTheme().setTheme`.

Fonte: https://sdk.oonapps.com/docs/frontend/temas