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.
Edit the page on GitHub/** @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)}}/>)}