Ship faster with beautiful components
HeroUI Pro

Dark mode

HeroUI supports both light and dark themes. To enable dark mode, simply add the dark class to your root element (html, body, or main).

This enables dark mode application-wide. For theme switching functionality, you can use a theme library or create a custom implementation.

Using next-themes

For Next.js applications, next-themes provides seamless theme switching functionality.

For more information, refer to the next-themes documentation.

Next.js App Directory Setup

Install next-themes

Install next-themes in your project.

Add next-themes provider

Wrap your app with the ThemeProvider component from next-themes.

Go to your app/providers.tsx or app/providers.jsx (create it if it doesn't exist) and wrap the Component with the HeroUIProvider and the next-themes provider components.

Note: We're using the class attribute to switch between themes, this is because HeroUI uses the className attribute.

Add the theme switcher

Add the theme switcher to your app.

Note: You can use any theme name you want, but make sure it exists in your tailwind.config.js file. See Create Theme for more details.

Next.js Pages Directory Setup

Install next-themes

Install next-themes in your project.

Add next-themes provider

Go to pages/_app.js or pages/_app.tsx (create it if it doesn't exist) and wrap the Component with the HeroUIProvider and the next-themes provider components.

Note: We're using the class attribute to switch between themes, this is because HeroUI uses the className attribute.

Add the theme switcher

Add the theme switcher to your app.

Note: You can use any theme name you want, but make sure it exists in your tailwind.config.js file. See Create Theme for more details.

Using use-theme hook

In case you're using plain React with Vite or Create React App you can use the @heroui/use-theme hook to switch between themes.

Install @heroui/use-theme

Install @heroui/use-theme in your project.

Add the current theme to the main element

Add the theme switcher

Add the theme switcher to your app.

Note: You can use any theme name you want, but make sure it exists in your tailwind.config.js file. See Create Theme for more details.

Create themeOverride styles