Email or username:

Password:

Forgot your password?
Roma's posts Post Back to profile
Roma Komarov

My new post: “Querying the Color Scheme”.

blog.kizu.dev/querying-the-col

Media queries are nice, but for many things, we don’t even need them: there is this great #CSS property `color-scheme`, which allows us to make various things adapt to the current color scheme. We can even set it on a per-element basis. This post describes how we can use registered custom properties and style queries to read the current value of a `light-dark()` color for styling any non-color properties as well.

29 August at 13:21 | Open on front-end.social
10 comments
Roma Komarov

As usual, credits:

- @bramus for his article about `light-dark()`.
- @anniegreens for her post about what she learned about `color-scheme`.
- @argyleink for his recent post about adaptive light/dark color schemes.
- @pepelsbey for the mention of one important difference between `prefers-color-scheme` and `color-scheme` in the latest @webstandards_ru podcast episode.
- @tabatkins for the `<meta name=color-scheme>` CSSWG issue.

29 August at 13:27 | Open on front-end.social
Roma Komarov

And, again, as usual, while doing the experiments for this post, I encountered at least two bugs in the browsers:

- An older, now fixed, Chromium bug: issues.chromium.org/issues/335
- A more recent Firefox bug: bugzilla.mozilla.org/show_bug.

It is like I encounter bugs almost every time I play with anything, haha.

29 August at 13:30 | Open on front-end.social
Thomas Steiner :chrome:

@kizu When I researched this area for web.dev/articles/color-scheme, there were many problems with system colors not getting updated when the mode changed like `Canvas` or `CanvasText`, the default visited link color in dark mode was horribly non-contrasting, and embedded iframes were unusable in dark mode. I'm pretty sure some of these issues are still not fixed in all browsers.

29 August at 19:36 | Open on toot.cafe
Roma Komarov

@tomayac Yeah, I remember that the system colors were very uneven in how they worked, and how the link color was basically broken in the dark mode of Safari at least. I, myself, rarely use these, but at least the `Canvas` and `CanvasText` seem relatively stable today. Although given the UA is free to choose their color, I'd also not rely on them in 100% of cases, but for simple prototypes/simple pages could be fine.

29 August at 19:53 | Open on front-end.social
lee :Fire_Trans:

@nebulos @aldercone since we were talking about this yesterday!

29 August at 13:43 | Open on strangeobject.space
Nathan Knowler

@kizu I feel the same way about the linked issue proposing to change how `prefers-color-scheme` to work. I think I’d have to rewrite some of my CSS mental models if that were to change. Seems less harmful to either use the style query approach you’ve demonstrated or for that to develop into its own specific query. Also, seems like style query support for at least some non-custom properties worth revisiting.

29 August at 13:52 | Open on sunny.garden
Mayank

@kizu ha, i was working on a post about color-scheme too. this just means i have to write fewer things 😁

and totally agreed on the media queries behavior: media queries should reflect the user's preference, not the author's (even if that's set in HTML). front-end.social/@mayank/11276

29 August at 14:34 | Open on front-end.social
Apple Annie :prami:

@kizu oooh I love your new (?) aside components! have you talked about those already?

29 August at 16:49 | Open on social.lol
Roma Komarov

@anniegreens Nope, not yet :) They're kinda a variation of what I had on my main site, just with some other ideas and experiments. Did them when working on this post, probably took me more time than the post itself, as it goes, haha.

Was mostly playing with implementing them in a responsive way, without using any media or container queries, just via container query length units calculations :D

29 August at 16:53 | Open on front-end.social
Go Up