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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With