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.