Web Advent Calendar 2024

CSS light-dark() Syntax

For settings colors in light and dark mode, many use the @media (prefers-color-scheme: dark) { media query. Either around specific selector, or around the definition of a color set via CSS vars.

Kind of a mixture of both is the CSS light-dark shorthand syntax for setting colors. This makes sense for small projects or in case you want to override some styles with inline CSS from a CMS.

:root {
	color-scheme: light dark;
}

body {
	color: light-dark(#000, #FFF);
	background-color: light-dark(#FFF, #000);
}

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark