A custom --light-dark() function in CSS that works with any type of value (not just colors!) in just 3 LOC

~

~

# The Code

If you are here just for the code, here it is:

@function --light-dark(--l, --d) {
  result: if(color-scheme(dark): var(--d); else: var(--l));
}

Usage is similar to the built-in light-dark(), but difference is that it can be used with any type of value:

#element {
  color-scheme: light dark;
  color: light-dark(#333, #e4e4e4);
  background-image: --light-dark(url(light.svg), url(dark.svg));
}

~

# The color-scheme() function

Powering this custom --light-dark() function is the new color-scheme() function. It’s a new addition to CSS which we only recently resolved on adding with the CSS Working Group.

The color-scheme() function allows you to query the used color scheme of an element. The function can be used in both @container queries and [the new if()](https://developer.chrome.com/blog/if-article).

In the following example I am using the function directly on an element (instead of placing it into a custom function):

#element {
  color-scheme: light dark;
  background-image: if(color-scheme(dark): url(dark.svg); else: url(light.svg));
}

The reason we need this new color-scheme() function is because the color-scheme property only lists which color schemes are supported. When set to light dark, you are indicating the element can adapt its rendering to either a light or dark version. This is controlled by your light/dark setting, with the resulting used value being one of those listed values.

FYI: You can also force a component into a specific mode by listing only 1 value for color-scheme, e.g. color-scheme: light will force the component into light mode, regardless of your OS setting.

~

# Spread the word

Feel free to reshare one of the following posts on social media to help spread the word:

• 🦋 BlueSky
• 🦣 Mastodon

~