What is this CSS property : -internal-light-dark

user_14577660 0
Viewed 10375

I was trying to style a select element with CSS only (what a dumb idea. I know) in Edge.
I noticed while looking to the browser default (user agent stylesheet) that these lines of style were applied:

color: -internal-light-dark(black, white);
background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));

I tried on Chrome 87 & Opera 71 and same default property is applied. From what I've seen, Firefox doesn't apply this.

I tried to do a Google search for "-internal-light-dark" but found nothing. Can someone explain me what does this do?

microsoft-edge css html
1 Answers

Here's the commit when it was added https://github.com/chromium/chromium/commit/5c56063a3a156531e2e368047bec5cfd48b2ff21

Then renamed https://github.com/chromium/chromium/commit/42267a718b56e0da01b82c4aee8b342f24e45c1b

Here are more related commits https://github.com/chromium/chromium/search?p=2&q=internal-light-dark&type=commits

From what I understand from the source, it's an internal (like the name implies) property used by chromium based browsers (that's why firefox ignores it) to store a pair or light/dark colors to use depending on the system's color schema.

EDIT: since it's not standard CSS I would suggest to not use them unless you really REALLY need to have some special rule for chromium-based browsers

EDIT: here you can see how they use it internally https://github.com/chromium/chromium/commit/5c56063a3a156531e2e368047bec5cfd48b2ff21#diff-60fdf3dc7f2f69a2b744d617c2c9ed1c293c1d2309f934d6ae285970ad8e8002R70

    const CSSColorValue& color_value = To<CSSColorValue>(
        WebColorScheme::kLight ? pair->First() : pair->Second());
    return color_value.Value();

If the color schema is light it uses the first value, else, the second.

user_14308100
Related