Skins & switching

Thirteen complete design languages over the same components. Load the CSS, wrap the app in a StyleProvider and change one word to change all of it.

Try itCopy Anchor Link

Type in the note, like it a few times, then pick another skin. The components re-render with new CSS; nothing is mounted again, so the text and the count stay.

import "@camaleo/styles/base.css";
import "@camaleo/styles/neubrutalism.css";
import "@camaleo/styles/editorial.css";

/* app/layout.tsx: const grotesk = Space_Grotesk({ subsets: ["latin"], variable: "--font-grotesk" }) */
[data-style="neubrutalism"] {
  --cml-font-body: var(--font-grotesk), system-ui, sans-serif;
}

import { StyleProvider } from "@camaleo/react";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <StyleProvider styleName="neubrutalism" mode="system" brand="#3fa34d">
      {children}
    </StyleProvider>
  );
}

The 13 skinsCopy Anchor Link

Every skin renders the same DOM: the matrix test compares the markup of all 13 and fails if one differs. Only CSS changes, which is why a switch is cheap.

material is inspired by Material Design and cupertino by the Human Interface Guidelines. Camaleo is not affiliated with Google or Apple and uses none of their fonts, icons or trademarks.

NestingCopy Anchor Link

A nested StyleProvider is an island: every token is declared again on its element, so it starts from clean defaults instead of mixing with its parent. The parent's mode and brand still reach it unless you set them.

Switching at runtimeCopy Anchor Link

Keep the skin in state and pass it down. Changing styleName changes one attribute on the same element, so React keeps every component and its state. Don't put the skin in a key: that remounts the tree and resets forms.

"use client";
import { useState } from "react";
import { STYLE_NAMES, type StyleName, StyleProvider } from "@camaleo/react";

export function App({ children }: { children: React.ReactNode }) {
  const [skin, setSkin] = useState<StyleName>("minimal");
  return (
    <StyleProvider styleName={skin}>
      <select aria-label="Skin" value={skin} onChange={(e) => setSkin(e.target.value as StyleName)}>
        {STYLE_NAMES.map((name) => <option key={name}>{name}</option>)}
      </select>
      {children}
    </StyleProvider>
  );
}

The whole page, from the serverCopy Anchor Link

To skin <html> itself (page background, scrollbars), spread styleScopeProps on it. It is server-safe, so a root layout can call it without a client component.

import { styleScopeProps } from "@camaleo/react/style-scope";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" {...styleScopeProps({ styleName: "editorial", mode: "system" })}>
      <body>{children}</body>
    </html>
  );
}