nextui/packages/hooks/use-theme

@heroui/use-theme

React hook to switch between light and dark themes

Installation

yarn add @heroui/use-theme
# or
npm i @heroui/use-theme

Usage

Import useTheme

import {useTheme} from "@heroui/use-theme";

theme

// `theme` is the active theme name
// by default, it will use the one in localStorage.
// if it is no such value in localStorage, `light` theme will be used
const {theme} = useTheme();

setTheme

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.

// set `theme` by using `setTheme`
const {setTheme} = useTheme();
// setting to light theme
setTheme('light')
// setting to dark theme
setTheme('dark')
// setting to purple-dark theme
setTheme('purple-dark')

Contribution

Yes please! See the contributing guidelines for details.

License

This project is licensed under the terms of the MIT license.