Theming

Theme provider

Wrap your application with the ThemeProvider to enable theme switching:

import { ThemeProvider } from "@/components/ui/theme-provider";
import "./globals.css";

export default function RootLayout({ children }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      {children}
    </ThemeProvider>
  );
}

Design theme

Switch between app and marketing themes using the hook:

import { useDesignTheme } from "@/components/ui/theme-provider";

const { designTheme, setDesignTheme } = useDesignTheme();
setDesignTheme("app"); // or "marketing"

Static and sandboxed output

Use resolve_theme when output cannot resolve CSS custom properties at render time (PDFs, emails, static HTML exports, and sandboxed artifacts). The response includes resolved colors plus Airy font stacks.

Do not use resolve_theme for normal web app components with airy.css loaded. Use semantic token classes directly and keep runtime theme switching dynamic.

1. Will CSS custom properties be available at render time?
2. If yes, use semantic tokens/classes directly.
3. If no or unknown, use resolve_theme.