CSS to HeroUI Theme Converter

Convert your existing CSS custom properties to HeroUI-compatible themes

Usage Instructions

1. Prepare your CSS

Make sure your CSS uses custom properties (CSS variables) with standard naming like--primary, --background, --foreground, etc.

2. Convert and save

Copy the generated TypeScript code and save it as customTheme.ts in your/styles/heroThemes/ folder.

3. Register the theme

Add your new theme to the heroThemes object in index.ts and update your Tailwind configuration.