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 React from 'react'
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 React from 'react'
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:
PostList A2
Next:
API