Docs › Frontend

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.

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

export const app = defineOonApp({
  // ...
  themes: [claro, escuro],
  defaultThemeId: claro.id,
});

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.