CosmeMilton UI Docs

Os componentes que leem tema precisam estar dentro de CmThemeProvider. CmThemeScript aplica os tokens antes da interação do usuário.

import { CmThemeProvider, CmThemeScript } from "cosmemilton-ui";

export function AppProviders({ children }) {
  return (
    <>
      <CmThemeScript />
      <CmThemeProvider>{children}</CmThemeProvider>
    </>
  );
}

Use CmThemeToggle quando quiser expor todos os temas cadastrados na biblioteca. Em headers apertados, prefira presentation="compact" com labelVisibility="desktop" e align="end" para preservar espaço horizontal.

import { CmThemeToggle } from "cosmemilton-ui";

export function Header() {
  return <CmThemeToggle presentation="compact" labelVisibility="desktop" align="end" />;
}

Para adicionar identidade própria no app consumidor, crie um ThemeConfig. Em Next/SSR, passe o mesmo registro para CmThemeScript e CmThemeProvider para evitar troca visual tardia. Em React puro, Vite ou CRA, registre customThemes apenas no CmThemeProvider.

import {
  CmThemeProvider,
  CmThemeScript,
  type ThemeConfig
} from "cosmemilton-ui";

const acmeTheme: ThemeConfig = {
  name: "acme",
  colors: {
    background: "#fbfaf7",
    foreground: "#20201d",
    muted: "#ede7dc",
    mutedForeground: "#6f675d",
    card: "#ffffff",
    cardForeground: "#20201d",
    popover: "#ffffff",
    popoverForeground: "#20201d",
    primary: "#2f4f46",
    primaryForeground: "#ffffff",
    secondary: "#d9cbb8",
    secondaryForeground: "#20201d",
    accent: "#b85c38",
    accentForeground: "#ffffff",
    success: "#2f855a",
    successForeground: "#ffffff",
    warning: "#b7791f",
    warningForeground: "#20201d",
    danger: "#c2413a",
    dangerForeground: "#ffffff",
    info: "#2563a8",
    infoForeground: "#ffffff",
    border: "#ddd5c8",
    input: "#d1c7b8",
    ring: "#2f4f46",
    selection: "#dbe8df",
    selectionForeground: "#20201d",
    overlay: "rgba(32, 32, 29, 0.48)"
  },
  typography: {
    fontFamily: '"Avenir Next", "Segoe UI", sans-serif',
    monospaceFamily: '"JetBrains Mono", monospace',
    baseSize: "16px",
    scaleRatio: 1.2
  },
  radii: {
    xs: "0.125rem",
    sm: "0.25rem",
    md: "0.5rem",
    lg: "0.75rem",
    xl: "1rem",
    full: "9999px"
  },
  shadows: {
    xs: "0 1px 2px 0 rgba(32, 32, 29, 0.06)",
    sm: "0 1px 3px 0 rgba(32, 32, 29, 0.10)",
    md: "0 12px 30px -20px rgba(47, 79, 70, 0.34)",
    lg: "0 24px 56px -32px rgba(47, 79, 70, 0.38)",
    xl: "0 36px 84px -42px rgba(47, 79, 70, 0.42)"
  }
};

const customThemes = [acmeTheme];

export function AppProviders({ children }) {
  return (
    <>
      <CmThemeScript
        customThemes={customThemes}
        defaultThemeName="acme"
      />
      <CmThemeProvider
        customThemes={customThemes}
        defaultThemeName="acme"
      >
        {children}
      </CmThemeProvider>
    </>
  );
}

Apps sem SSR não precisam de CmThemeScript. Importe o CSS uma vez no entrypoint e passe customThemes direto no CmThemeProvider.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "cosmemilton-ui/styles.css";
import {
  CmThemeProvider,
  themes,
  type ThemeConfig
} from "cosmemilton-ui";
import { App } from "./App";

const baseTheme = themes["cm-neutral"];

const customThemes: ThemeConfig[] = [
  {
    ...baseTheme,
    name: "cm-brand",
    colors: {
      ...baseTheme.colors,
      background: "#f8fafc",
      foreground: "#172033",
      card: "#ffffff",
      cardForeground: "#172033",
      primary: "#006b5f",
      primaryForeground: "#ffffff",
      secondary: "#395b64",
      secondaryForeground: "#ffffff",
      border: "#d7dee7",
      ring: "#006b5f"
    }
  }
];

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <CmThemeProvider customThemes={customThemes} defaultThemeName="cm-brand">
      <App />
    </CmThemeProvider>
  </StrictMode>,
);

Setup de tema

Provider no App Router

Troca de tema

Tema customizado

Tema customizado em Vite ou CRA