:root { color-scheme: dark light custom; } body { color: schemed-value( light hotpink, /* Value to use when the light color-scheme is used */ dark lime, /* Value to use when the dark color-scheme is used */ --custom rebeccapurple /* Value to use when the --custom color-scheme is used */ ); } It’s still only a proposal, but as it stands right now you would register a custom color scheme using a name, a base-scheme to start from, and then specifying the values for the System Colors: /* Fully fledged custom color scheme */ @color-scheme --solarized-dark { base-scheme: dark; AccentColor: …; AccentColorText: …; … } Once registered, this custom scheme becomes a valid value for color-scheme , schemed-value() and – thanks to the Web Preferences API – in prefers-color-scheme Media Query…