The CSS light-dark() function currently supports only two color schemes (light and dark), but there's ongoing discussion about whether it should support more modes like high contrast. The function is actually an intermediary step toward a more robust schemed-value() function that would handle custom color schemes through @color-scheme at-rules. While light-dark() could be extended, the preferred approach is developing the broader schemed-value() functionality, which would make light-dark() syntactic sugar for simple two-mode scenarios.
Table of contents
The light-dark() function, brieflyJust two modes?Custom color schemesWe need more color theme support, but not in light-dark()What about custom functions?The path forwardMore on light-dark()light-dark()Come to the light-dark() SideExploring the CSS contrast-color() Function… a Second TimePoking at the CSS if() Function a Little More: Conditional Color ThemingSort: