Dark mode
As we mentioned before in the Theme section NextUI comes with two default
themes lightand dark. So using the dark theme is as simple as adding it to the className of the
html / body or main element.
This will enable the dark mode for the whole application. However, many applications require the capability to switch between different themes. For this purpose, we recommend using a theme switch library or creating your own implementation.
Using next-themes
For applications using Next.js, the next-themes library is an excellent choice. It comes packed with features that enhance the user experience when transitioning between themes.
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 NextUIProvider and the next-themes provider components.
Note: We're using the
classattribute to switch between themes, this is because NextUI uses theclassNameattribute.
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.jsfile. 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 NextUIProvider and the next-themes provider components.
Note: We're using the
classattribute to switch between themes, this is because NextUI uses theclassNameattribute.
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.jsfile. 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 @nextui-org/use-theme hook to switch between themes.
Install @nextui-org/use-theme
Install @nextui-org/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.jsfile. See Create Theme for more details.
