useTheme

Read and toggle the active theme.

const { activeTheme, themeMode, setThemeMode, allowSystem, toggleTheme } = useTheme()

Reads the theme from the nearest ThemeProvider. toggleTheme switches between light and dark (or cycles system, light, dark with allowSystem) and stores the choice; setThemeMode picks a mode directly. Outside a provider it returns { activeTheme: "dark", themeMode: "dark", allowSystem: false } with no-op functions.

Active theme: light (mode: system)

API

activeTheme'light' | 'dark'
The theme in effect (the choice, or the device theme in system mode).
themeMode'light' | 'dark' | 'system'
Default: 'system'
The user's choice; system follows the device.
setThemeMode(mode: 'light' | 'dark' | 'system') => void
Choose a mode. system clears the stored choice.
allowSystemboolean
Default: false
Whether the system mode is offered.
toggleTheme() => void
Switch to the other theme, or to the next mode with allowSystem.

Returns props
Prop	Type	Default	Description
`activeTheme`	'light' \| 'dark'	–	The theme in effect (the choice, or the device theme in `system` mode).
`themeMode`	'light' \| 'dark' \| 'system'	`'system'`	The user's choice; `system` follows the device.
`setThemeMode`	(mode: 'light' \| 'dark' \| 'system') => void	–	Choose a mode. `system` clears the stored choice.
`allowSystem`	boolean	`false`	Whether the `system` mode is offered.
`toggleTheme`	() => void	–	Switch to the other theme, or to the next mode with `allowSystem`.