Tema
cosmemilton-ui/theme

CmThemeProvider

Use no topo da app quando precisar de troca de tema em runtime, temas customizados ou densidade global. Os tokens dos temas embutidos já vêm estáticos em styles.css, então o provider só troca o atributo data-theme do <html> (e persiste a escolha em localStorage) — sem ele, a app renderiza com o tema padrão cm-neutral ou com o tema fixado via data-theme.

Import

tsx
import { CmThemeProvider } from "cosmemilton-ui/theme";

Provider com tema inicial

cm-blue

Provider aninhado

Tema e densidade aplicados ao trecho renderizado.

Tema customizado via customThemes

Estenda um tema publicado, sobrescreva os tokens desejados e registre o seu com a prop customThemes.

sunset

Tema customizado

primary, accent e os raios vêm do tema novo; o resto herda do cm-neutral.

API rápida

Props principais de cada peça exportada.

CmThemeProvider

customThemesdefaultThemeNamedensity/defaultDensitychrome/defaultChrome

Notas

customThemes aceita ThemeConfig[] ou um ThemeRegistry; veja o catálogo de tokens e o passo-a-passo de criação em /resources/theme.

Temas custom são injetados uma vez como um <style id="cm-theme-custom"> (reaproveitando o que o CmThemeScript tiver renderizado no servidor); o provider não escreve mais variáveis inline no <html>, então seus overrides de tokens via CSS comum sempre funcionam.

Em Next, combine com CmThemeScript no <head> para aplicar o tema salvo antes do primeiro paint (sem flash no SSR); ele aceita nonce para CSP sem 'unsafe-inline'.