A system color mode (as opposed to changing to light/dark based on the system preferences)

[thecrowkeep]

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

[Piotr Monwid-Olechnowicz]

Hi @thecrowkeep 👋 Thank you for the issue!

Very legit feature request! We've actually discussed it recently in #2264.

[thecrowkeep]

Very legit feature request! We've actually discussed it recently in #2264.

My bad! I can't believe I missed that. Sorry for making a duplicate!