Header Themes

Cycle the header through its light, primary, dark, and unstyled themes live.

theme="light | primary | dark | none"themeheadervariants

Open fullscreen

9:41

In this demo

Chroma — theme lab

What to try

Cycle through all four header themes
Watch text and borders adapt per theme

Code

app.tsx

import { AppShell, Header, Content, type HeaderTheme } from "appshell-react";

export default function App() {
  const [theme, setTheme] = useState<HeaderTheme>("light");

  return (
    <AppShell safeArea>
      {/* theme: "light" | "primary" | "dark" | "none" */}
      <Header
        behavior="fixed"
        theme={theme}
        // theme="none" ships zero styles — style it yourself:
        className={theme === "none" ? "bg-fuchsia-50 text-fuchsia-950" : undefined}
        logo={<span className="font-bold">Chroma</span>}
        title={`theme="${theme}"`}
      />
      <Content>
        {/* Theme picker cards */}
      </Content>
    </AppShell>
  );
}

Nested Overlays Dark Mode