A system color mode (as opposed to changing to light/dark based on the system preferences) #2268
Description
Is your feature request related to a problem? Please describe.
I'm trying to incorporate a color mode that will prefer the user's system settings if selected, however, other color modes will overwrite the system preferences. Basically if theme-ui-color-mode in localstorage is set to system, it will use (prefers-media-query), but if it is set to light it will simply load the light color mode instead.
Describe the solution you'd like
theme config
/* theme config */
{
config: {
useColorSchemeMediaQuery: "initial",
},
...theme
}/* color mode selector component */
const [colorMode, setColorMode] = useColorMode()
/* this tracks the last selected mode that is not system preferences */
const [userColor, setUserColor] = useState(colorMode !== 'system' ? colorMode : 'default')
const handleSystemPref = ({target: {checked}}) =>
setColorMode(checked ? 'system' : userColor)
return (<>
<Switch
checked={colorMode === 'system'}
onChange={handleSystemPref}
/>
{colorMode !== 'system' && <>
<Button onClick={()=>setColorMode('light')}>
Light
</Button>
<Button onClick={()=>setColorMode('dark')}>
Dark
</Button>
<Button onClick={()=>setColorMode('alt')}>
Alternate theme
</Button>
</>}
</>)Describe alternatives you've considered
One nice but not super valuable feature to have would be being able to define system preferences based modes for 'top level' modes
/* theme config */
colors: {
modes: {
dark: {
background: `black`,
},
alt: {
system: {
dark: {
background: 'dark purple',
},
light: {
background: 'light purple',
},
},
},
},
background: 'white,
}Additional context
Visually this is what I want to happen
System preference is on => render color mode based on localstorage => prefers-color-scheme
System preference is off => render color mode based on localstorage => light
System preference is off => render color mode based on localstorage => dark
