hooks.mdx

title
Hooks

Hooks

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

To learn more about how React Hooks work, please see the official React docs.

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.