How to use the theme-ui.useColorMode function in theme-ui
To help you get started, weβve selected a few theme-ui examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
feathericons / feathericons.com / src / components / ColorModeToggle.js View on Github 
function ColorModeToggle(props) {
const [colorMode, setColorMode] = useColorMode()
return (
<button aria-label="{"> {
setColorMode(colorMode === 'default' ? 'dark' : 'default')
}}
sx={{
padding: 1,
lineHeight: 'none',
color: 'icon',
backgroundColor: 'transparent',
}}
{...props}
></button>function ColorModeButton() {
const [colorMode, setColorMode] = useColorMode()
const toggleColorMode = useCallback(() => {
setColorMode(colorMode => (colorMode === 'light' ? 'dark' : 'light'))
}, [setColorMode])
return (
<button>
<span aria-hidden="">
{colorModeIcon[colorMode]}
</span>
{`Toggle ${colorMode === 'dark' ? 'Light' : 'Dark'} Mode`}
</button>const Panel = ({ state, setColorMode, setTheme, panelColorMode }) => {
const setPanelColorMode = useColorMode()[1]
useEffect(() => {
setPanelColorMode(panelColorMode)
}, [])
return (
<div>
<header>
<h1>
Theme UI Devtools</h1></header></div>function Brand(props) {
const [colorMode] = useColorMode()
return (
<svg viewBox="0 0 544 104">
<linearGradient y2="100%" y1="0%" x2="50%" x1="50%" id="prefix__a">
<stop offset="{0}"></stop>
<stop offset="{1}"></stop>
</linearGradient>
<linearGradient y2="100%" y1="0%" x2="50%" x1="50%" id="prefix__b">
<stop offset="{0}"></stop>
<stop offset="{1}"></stop>
</linearGradient>
</svg>function DarkModeToggle() {
const [colorMode, setColorMode] = useColorMode()
const isDark = colorMode === `dark`
function toggleColorMode(event) {
event.preventDefault()
setColorMode(isDark ? `light` : `dark`)
}
return (
