RecursoBase

Tema, densidade e tokens

Configure o tema no layout raiz. Em Next, CmThemeScript evita flash visual antes da hidratacao.

Toggle e menu de tema

Tema atual: neutral

"use client";

import { CmThemeMenu, CmThemeToggle } from "cosmemilton-ui/theme";
import { CmRow } from "cosmemilton-ui/server";

export default function Example() {
  return (
    <CmRow gap="sm" align="center" wrap>
      <CmThemeToggle themes={["cm-neutral", "cm-dark", "cm-blue"]} />
      <CmThemeToggle presentation="compact" labelVisibility="hidden" />
      <CmThemeMenu align="start" themes={["cm-neutral", "cm-rose", "cm-aurora"]} />
    </CmRow>
  );
}

Densidade via hook

Densidade atual: default

"use client";

import { CmButton } from "cosmemilton-ui/client";
import { CmThemeProvider, useCmTheme } from "cosmemilton-ui/theme";
import { CmCard, CmRow, CmStack, CmText } from "cosmemilton-ui/server";

function DensityControls() {
  const { density, setDensity } = useCmTheme();

  return (
    <CmCard padding="lg">
      <CmStack gap="sm">
        <CmText weight="semibold">Densidade atual: {density}</CmText>
        <CmRow gap="sm" wrap>
          <CmButton size="sm" variant={density === "compact" ? "solid" : "outline"} onClick={() => setDensity("compact")}>
            Compact
          </CmButton>
          <CmButton size="sm" variant={density === "default" ? "solid" : "outline"} onClick={() => setDensity("default")}>
            Default
          </CmButton>
          <CmButton size="sm" variant={density === "comfortable" ? "solid" : "outline"} onClick={() => setDensity("comfortable")}>
            Comfortable
          </CmButton>
        </CmRow>
      </CmStack>
    </CmCard>
  );
}

export default function Example() {
  return (
    <CmThemeProvider defaultDensity="default">
      <DensityControls />
    </CmThemeProvider>
  );
}

Snippets

Layout raiz no Next

import "cosmemilton-ui/styles.css";
import { CmThemeProvider, CmThemeScript } from "cosmemilton-ui/theme";

export default function RootLayout({ children }) {
  return (
    <html lang="pt-BR" suppressHydrationWarning>
      <body>
        <CmThemeScript defaultThemeName="cm-neutral" />
        <CmThemeProvider defaultThemeName="cm-neutral">
          {children}
        </CmThemeProvider>
      </body>
    </html>
  );
}

Temas publicados

import { themes, extendThemes, themeToCSSVars } from "cosmemilton-ui/theme";

const available = Object.keys(themes);
const cssVars = themeToCSSVars(themes["cm-blue"]);
const registry = extendThemes([customTheme]);

Notas

Temas publicados: cm-neutral, cm-school, cm-dark, cm-orange, cm-red, cm-blue, cm-green, cm-violet, cm-midnight, cm-rose e cm-aurora.

Densidades publicas: default, comfortable e compact.