Apply color theme presets to your website.
Apply a pre-made color theme to your website.
| Theme | Primary | Accent | Vibe |
|---|---|---|---|
| default | Indigo | Rose | Professional, trustworthy |
| ocean | Cyan | Teal | Fresh, modern, tech |
| forest | Green | Gold | Natural, eco-friendly |
| sunset | Coral | Orange | Warm, friendly, creative |
| minimal | Grayscale | Gray | Clean, editorial, luxury |
| royal | Purple | Pink | Bold, creative, premium |
Add the theme class to <html> in app/layout.tsx:
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className="theme-ocean">
<body className={`${fonts} font-sans antialiased`}>
{children}
</body>
</html>
);
}
Combine theme with dark mode:
<html lang="en" className="theme-ocean dark">
Or with auto dark mode:
<html lang="en" className="theme-forest dark-auto">
<html lang="en" className="theme-ocean">
<html lang="en" className="theme-forest">
<html lang="en" className="theme-sunset">
<html lang="en" className="theme-minimal">
<html lang="en" className="theme-royal">
Create your own by adding to globals.css:
.theme-custom {
--color-primary-500: 210 100% 50%; /* Your primary HSL */
--color-primary-600: 212 100% 45%;
--color-primary-700: 214 100% 40%;
--color-accent-500: 45 100% 50%; /* Your accent HSL */
--color-accent-600: 43 100% 45%;
}
Then apply:
<html lang="en" className="theme-custom">
210 100% 50%