Skip to content
Theme UI
GitHub

Color Mode Toggles

Create a button to toggle between light and dark color modes.

/** @jsx jsx */
import { jsx, useColorMode } from 'theme-ui'
export default props => {
const [ mode, setMode ] = useColorMode()
return (
<button
{...props}
onClick={e => {
const next = mode === 'dark' ? 'light' : 'dark'
setMode(next)
}}
/>
)
}

Cycling through multiple modes

Create a button to cycle through multiple color modes.

/** @jsx jsx */
import { jsx, useColorMode } from 'theme-ui'
const modes = [
'light',
'dark',
'purple',
'pink',
]
export default props => {
const [ mode, setMode ] = useColorMode()
return (
<button
{...props}
onClick={e => {
const index = modes.indexOf(mode)
const next = modes[(index + 1) % modes.length]
setMode(next)
}}
/>
)
}
Edit the page on GitHub
Previous:
Theme Color Meta Tag
Next:
Global Styles