I’ve written about light-dark() before here on bram.us, and last month I also wrote an article for web.dev about it.
The article takes a bit of a different approach, so it’s still worth a read even when you’ve seen my previous one before.
System colors have the ability to react to the current used
color-schemevalue. Thelight-dark()function exposes the same capability to authors.
I’m especially fond of this demo that I built. The page responds to your Operating System’s light/dark setting but also allows overriding light/dark mode by changing the value of the color-scheme to only light or only dark.
See the Pen
Color switching with light-dark() and color-scheme by web.dev (@web-dot-dev)
on CodePen.
I noticed this CSS rule in the stylesheet:
mark {
background: var(–highlight-color);
transition: color 0.4s, background-color 0.4s;
}
Here, background is explicitly styled, while color inherits its value. Both are included in the transition property. When I recorded the transition process using the devtools performance panel, I found that color triggers an animation on every frame. This could lead to performance issues in real-world applications.
I came across this issue: https://issues.chromium.org/issues/40337057. Although it is marked as “fixed,” it doesn’t seem to apply in this case.
I dug into this and the issue seems to be related to the
<mark>node that fires a `color` animation for every frame.I have filed https://issues.chromium.org/issues/438038784 for this. If you log in on that page, you can hit the star at the top left of it to subscribe to updates.