Email or username:

Password:

Forgot your password?
All posts Bramus's posts Post Back to profile
Bramus

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 brm.us/light-dark to get to know the details.

Browser Support: Firefox 120.
9 Oct 2023 at 21:09 | Open on front-end.social
10 comments
Chris Ferdinandi ⚓️
Bramus

@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.

9 Oct 2023 at 21:29 | Open on front-end.social
Michael
𝟙𝔸
Bramus

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 🫶)

9 Oct 2023 at 21:30 | Open on front-end.social
Tixie Salander

@bramus 👀👀👀 to the @webkit team now, that would be awesome!

9 Oct 2023 at 22:26 | Open on mastodon.guerilla.studio
Keith J Grant

@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)

9 Oct 2023 at 21:37 | Open on front-end.social
Chris
p01

@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

9 Oct 2023 at 21:52 | Open on mastodon.social
Roma Komarov

@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!)

9 Oct 2023 at 21:59 | Open on front-end.social
Go Up