Theming

Airy ships with a dual theme system: app and marketing themes, each with light and dark modes.

Theme provider

Wrap your application with the ThemeProvider to enable theme switching:

import { ThemeProvider } from "@/registry/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 "@/registry/ui/theme-provider";

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