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)
      }}
    />
  )
}