Should the CSS Licht-Dark () function more than light and dark values? | CSS tricks

One of the newer CSS functions that has aroused my interest: the light-dark() function. And since then I have been following it since then It became the basic line in May 2024.

The light-dark() function, short

If you don’t know, the light-dark() Function has two color arguments: one for light mode and one for dark mode. Hence the name light-dark(). It switches between the two light and dark values ​​based on the preferences of a user. Sara Joy has a wonderful article where you can get a much more detailed explanation.

The most important thing is that the function requires you the color-scheme Property to activate those two color modes:

:root {
  color-scheme: light dark;
}

.element {
  color: light-dark(brown, black);
}

And, depending on the preference of the user, one of those two modes is applied.

Only two modes?

That said, I’ve been wondering for a while: Must the light-dark() Job support more than light and dark color modes?

I wrote about light-dark() For the CSS tricks Almanac. During my research I noticed that I wanted the function more, in particular that it lacks support for other types of color schemes that a user might prefer, such as gray values, high contrast and low contrast.

Do light-dark() Even need a high contrast mode?

I would say both yes And No. Let’s go back in time to when light-dark() was initially presented somewhere around 2022. Emilio Cobos sought -after For a function to support light and dark modeAnd It was added to the specifications.

Ready and handled, right? Not so fast. The ticket was indeed closed when Jacob Miller Chimde Inside:

I’ve just seen this from @BramusThe post, and I suspect that things are already closed / there is no changing things now, but I see this as an approach that does not really solve for the problems that people with theme are confronted with, and does this in a way that will create a fall for them when pursuing the right theme support.

[…]

We do not have to send a tools for one purpose for the browser, but rather scale and what we can build on.

It’s a good thing he hit, because that brought Bramus to it reopen the ticket:

I think this was done neglected. The final goal is to have something like that schemed-value()of light-dark() An intervening step is in the direction of the final solution.

That’s a big problem! Bramus says the light-dark() function is an intervening solution on the way to one schemed-value() function. In other words, shipping light-dark() Never was the intended final goal. It is a step along the way to this other more robust schemed-value() function.

Custom color schemes

Bramus has already written A couple about the schemed-value() concept. It could look like this:

:root {
  color-scheme: dark light custom;
}

body {
  color: schemed-value(
    light lightblue, /* Value used for light color-scheme */ 
    dark crimson, /* Value used for dark color-scheme */ 
    --custom green /* Value used for --custom color-scheme */
    );
}

This is not possible with light-dark(). In fact, before the function can support more than two modes, the color-scheme ownership must be expanded with more than the light And dark Values. Only then is possible light-dark() are expanded because, remember, light-dark() Has the color-scheme ownership to do his thing.

In particular we would need color-scheme To accept a kind of “adapted” color scheme value. Tab Atkins gives a possible example In the card. The idea is to register a modified color scheme with a @color-scheme At-rule that defines the properties of the schedule, such as which specific color keywords are assigned, and then use the identification of that color scheme on the color-scheme Feature that is explained on the root element:

@color-scheme --high-contast {
  base-scheme: dark;
  canvascolor: black;
  canvastext: white;
  accentcolor: white;
  /* other properties set to specific colors */
}

html {
  color-scheme: --high-contrast;
}

With that in place, the adapted color scheme can be used as its own isolated value in the coming schemed-value() function:

@color-scheme --high-contast {
  /* ... */
}

html {
  color-scheme: --high-contrast light dark;
}

body {
  color: schemed-value(--high-contrast, black, white);
}

Break everything down:

• We register a modified color scheme (e.g. --high-contrast)) In one @color-scheme at-rule.
• We define the properties of the color scheme in the interest rate, such as whether the base theme is light or dark And to which certain values ​​assign keywords color.
• We explain the adapted color scheme on it color-scheme feature at the ground level (ie, html { color-scheme: --high-contrast;}).
• We apply the adapted color scheme by explaining it on color -related properties through the schemed-value() function.

So not alone light-dark() Change, the CSS color-scheme Ownership will most likely have his own interest in allowing the habit color-scheme Values.

We need more support for color theme, but not in light-dark()

This raises my earlier question: does the light-dark() Function should really support more than two color schemes? Bramus has an answer:

When schemed-value() ever becomes something, light-dark() there would be syntactic sugar for it.

A-HA! This means light-dark() does not have to support multiple modes because schemed-value() has the power to expand light-dark() Because of his own virtue:

light-dark(, ); = schemed-value(light , dark );

Is light-dark() An intermediate step? Yes, that’s it. And should it be expanded to support multiple modes, including adapted color schemes? That could certainly be, but it doesn’t have to be. Instead, we can register and define a modified color scheme color-scheme Ownership can read. In this way we get the simplicity of a two-mode function that can be further abstracted to support extra custom modes, if necessary.

In fact, it goes beyond color schemes. There is even an open ticket to expand light-dark() for imagesAnd the discussions around it seem to agree on a new function that was specially designed for it.

What about adapted functions?

But wait! Is this not much of this sound like what we have heard about the work that happens with adapted functions? Indeed, Tab came back with a possible approach using the if() functionand the Chris Lilley has withdrawn the ticket as a result. That’s when Bramus demonstrated how we the light-dark() Function with a custom CSS function:

:root {
  /* ensures light mode comes first */
  --scheme: light;

  /* dark mode is set here */
  @media (prefers-color-scheme: dark) {
    --scheme: dark;
  }
}

/* custom function returns any two values depending on whether system is in light or dark mode */
@function --light-dark(--light-color, --dark-color) {
  result: if(style(--scheme: dark): var(--dark-color) ; else: var(--light-color));
}

p {
  font-size: --light-dark(
    2rem,
    2.5rem
  ); /* returns 2rem if system is in light mode and 2.5rem if system is in dark mode */
}

Nothing has been put in stone! All we know for sure is that we have a work light-dark() Function and the basic line that is available on a large scale for use. Adapted functions A work in progress and only available in On chrome -based browsers At that time I write this.

Forward

I have been coloring everything related for a while and I would like to know your thoughts: are you enthusiastic about the upcoming changes in light-dark()? Do you think light-dark() Should support more color modes such as high contrast?

Let me know your thoughts in the commentary section below. Feel free to also comment on one of the W3C Github commentaThreads that are linked in this message to share your thoughts and ensure the coming new functions.

More about light-dark()