Skip to content
Theme UI
GitHub

Hooks

Theme UI includes hooks for changing the color mode state and for using the Theme UI context directly.

useThemeUI

To access the context object directly in a component, use the useThemeUI hook.

import { useThemeUI } from 'theme-ui'
export default (props) => {
const context = useThemeUI()
const { theme, components, colorMode, setColorMode } = context
return <pre>{JSON.stringify(theme, null, 2)}</pre>
}

useColorMode

To change the color mode state in your application, use the useColorMode hook.

import { useColorMode } from 'theme-ui'
export default (props) => {
const [colorMode, setColorMode] = useColorMode()
return (
<button
onClick={(e) => {
setColorMode(colorMode === 'light' ? 'dark' : 'light')
}}>
Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
</button>
)
}

Learn more in the color modes docs.

Edit the page on GitHub
Previous:
Color Modes
Next:
API