 To change a color based on Light Mode or Dark Mode, you’d typically use a `prefers-color-scheme` Media Query. To make things easier, CSS now comes with a `light-dark()` utility function. Read https://brm.us/light-dark to get to know the details. Browser Support: Firefox 120. 10 comments
@cferdinandi Yeah! This is gonna simplify things a lot. A pity it’s colors only (for now). Things like image-sets could also benefit from this.  As for support in browsers other that Firefox: bugs have been filed, and Chromium’s one has already been assigned 😊 (I love our engineering team 🫶) @bramus Whoa, amazing! I am curious why it's restricted to accept `<color>` parameters? Was that technically simpler to implement? Or just a lack of other valid use cases? (For some reason searching for "light-dark" in the github issues to find this answer myself is absolutely worthless) @bramus gotta read the details, but was there some consideration to have a syntax that supports more color scheme like forced-colors? Or who knows, there could be color schemes for common color blindness. Would be nice to have a unified syntax to define colors, and other values for the different color schemes  @bramus One day it would be very easy to replace my var(--LIGHT, …) var(--DARK, …) space-toggles-based solution with this :D (which we use in production for around a year with zero issues!) |
Gregory's Server
@bramus OH SHIT that's amazing!