Color Mode Toggles

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

/** @jsxImportSource theme-ui */
import { 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.

/** @jsxImportSource theme-ui */
import { 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)
      }}
    />
  )
}