Customize theme

HeroUI provides light and dark themes that can be customized to match your needs. You can also create custom themes based on these defaults, using Layout and Color tokens.

Customizing Layout

Layout tokens let you customize spacing, typography, borders and more - either globally or per theme.

Global Layout Customization

You can customize border radius, border width, and disabled opacity across all themes by modifying your tailwind.config.js file:

Layout tokens are used across all HeroUI components. For example, the Button component uses radius and borderWidth tokens for its styling. Here's how it looks with the customized values:

See the Layout section for more details about the available tokens.

Customizing Colors

Now, Let's say you wish to modify the primary and focus colors of the dark theme. This can be achieved by adding the following code to your tailwind.config.js file.

This modification will impact all components using the primary color. For instance, the Button component uses the primary color as background color when the variant is solid or ghost.

🎉 That's it! You have successfully customized the default theme. See the Colors section for more details about the available semantic colors and color tokens.