The GridCN uses a ThemeProvider to manage themes via data-theme attributes on the <html> element. This allows components using CSS variables to react automatically to theme changes.
Available themes: ares, tron, clu, athena, aphrodite, poseidon.
To use them, wrap your application root with ThemeProvider and use the useTheme hook in client components to switch themes dynamically.
// app/layout.tsx
import { ThemeProvider } from "@/components/theme";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<body className="...">
<ThemeProvider defaultTheme="ares">{children}</ThemeProvider>
</body>
</html>
);
}
// any client component
"use client";
import { useTheme } from "@/components/theme";
export function Toggle() {
const { theme, setTheme } = useTheme();
return (
<button onClick={() => setTheme(theme === "ares" ? "tron" : "ares")}>
{theme}
</button>
);
}
