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 } = contextreturn <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 (<buttononClick={(e) => {setColorMode(colorMode === 'light' ? 'dark' : 'light')}}>Toggle {colorMode === 'light' ? 'Dark' : 'Light'}</button>)}
Learn more in the color modes docs.
Edit the page on GitHub