Loading...
A comprehensive theme system for HeroUI with TypeScript support, CSS conversion utilities, and multiple pre-built themes.
coffee - Warm, earthy light theme with coffee browns and cream colorscoffee-dark - Dark variant with rich coffee tonesocean - Cool blues and teals, perfect for tech/business sitesocean-dark - Deep ocean dark themeforest - Natural greens and browns, great for eco/outdoor brandsforest-dark - Dark forest theme with bright accent colorstech - Sharp, minimal theme with zero border radiuscyberpunk - Neon colors with futuristic stylingclaymorphism - Soft, rounded clay-like design with muted purplesclaymorphism-dark - Dark variant of claymorphism themeviolet-bloom - Beautiful violet with soft pastelsviolet-bloom-dark - Dark variant with bright violet accentspink - Vibrant pink themenotebook - Clean, paper-like minimal designnotebook-dark - Dark notebook themet3chat - Modern chat interface with blue/green accentst3chat-dark - Dark variant for chat applicationsThemes are automatically available in your application. Switch between them using:
import { useTheme } from "next-themes";
function ThemeSwitcher() {
const { setTheme } = useTheme();
return (
<select onChange={(e) => setTheme(e.target.value)}>
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="coffee">Coffee</option>
<option value="coffee-dark">Coffee Dark</option>
<option value="ocean">Ocean</option>
<option value="forest">Forest</option>
<option value="tech">Tech</option>
<option value="cyberpunk">Cyberpunk</option>
</select>
);
}
styles/heroThemes/yourtheme.ts:import type { ConfigTheme } from "@heroui/theme";
export const yourTheme: ConfigTheme = {
colors: {
background: {
DEFAULT: "hsl(0 0% 100%)",
foreground: "hsl(0 0% 0%)",
},
primary: {
DEFAULT: "hsl(200 100% 50%)",
foreground: "hsl(0 0% 100%)",
// Add 50-900 scale...
},
// Add other colors...
},
layout: {
fontSize: {
tiny: "0.75rem",
small: "0.875rem",
medium: "1rem",
large: "1.125rem",
},
radius: {
small: "0.25rem",
medium: "0.5rem",
large: "0.75rem",
},
borderWidth: {
small: "1px",
medium: "2px",
large: "3px",
},
disabledOpacity: 0.5,
dividerWeight: "1px",
},
};
styles/heroThemes/index.ts:import { yourTheme } from "./yourtheme";
export const heroThemes = {
// ...existing themes
yourtheme: yourTheme,
} as const;
/theme-converter in your appThe built-in CSS converter can transform existing CSS custom properties into HeroUI themes.
The converter recognizes these common CSS variables:
:root {
/* Backgrounds */
--background: hsl(0 0% 100%);
--foreground: hsl(0 0% 0%);
/* Colors */
--primary: hsl(200 100% 50%);
--primary-foreground: hsl(0 0% 100%);
--secondary: hsl(120 100% 50%);
--secondary-foreground: hsl(0 0% 100%);
/* Semantic Colors */
--destructive: hsl(0 100% 50%);
--destructive-foreground: hsl(0 0% 100%);
/* UI Elements */
--border: hsl(0 0% 90%);
--input: hsl(0 0% 95%);
--ring: hsl(200 100% 50%);
--muted: hsl(0 0% 95%);
--muted-foreground: hsl(0 0% 50%);
/* Layout */
--radius: 0.5rem;
}
.dark {
/* Dark mode overrides */
--background: hsl(0 0% 10%);
--foreground: hsl(0 0% 90%);
/* ... */
}
hsl(200 100% 50%)oklch(0.7 0.15 200) (auto-converted to HSL)#3366ff (auto-converted to HSL)Each theme includes:
All themes are fully typed with TypeScript for:
Use theme-aware classes in your components:
<div className="bg-primary text-primary-foreground p-4 rounded-large border-medium">
This respects the current theme
</div>
import { heroThemes } from "@/styles/heroThemes";
// Get all available themes
const availableThemes = Object.keys(heroThemes);
// Access theme configuration
const coffeeTheme = heroThemes.coffee;
console.log(coffeeTheme.colors.primary.DEFAULT);
import { heroThemes } from "@/styles/heroThemes";
function DynamicThemeLoader({ themeName }: { themeName: string }) {
const theme = heroThemes[themeName as keyof typeof heroThemes];
if (!theme) {
return <div>Theme not found</div>;
}
return (
<div style={{
backgroundColor: theme.colors.background.DEFAULT,
color: theme.colors.foreground.DEFAULT
}}>
Dynamic theme content
</div>
);
}
styles/
├── heroThemes/
│ ├── index.ts # Theme registry and exports
│ ├── coffee.ts # Coffee themes (light & dark)
│ ├── ocean.ts # Ocean themes (light & dark)
│ ├── forest.ts # Forest themes (light & dark)
│ ├── tech.ts # Tech theme
│ ├── cyberpunk.ts # Cyberpunk theme
│ └── pink.ts # Pink theme
├── heroui.ts # HeroUI plugin configuration
└── globals.css # Global styles
utils/
└── css-to-heroui-converter.ts # CSS conversion utilities