31–40 of 74 posts
This method is pretty much ternary operator and it requires a browser support to be used, insanity.
A genuinely useful behaviour of a function like this would be to return the colour with most contrast over the background of its container element, rather than a predefined colour scheme. I know that’s not how CSS works.
Unworkable in the sense that, for example, some elements are not physically positioned inside their container elements, and sometimes even in light dark mode you might use elements to create subtle layering etc, where you’d want the least contrast.
It wouldn’t be too difficult to write a gimmick webpage though, that implements the idea, to see what kind of fun would ensue.
I’ve got some sample code here that uses the little known but very powerful “tree Walker” to change elements 1 by 1.
https://til.secretgeek.net/css/replace_text_with_property_va...
And you can write javascript code that alters css variable values like this:
var root = document.documentElement; root.style.setProperty('--main-hue', 0);
I think the particular can of worms you’re suggesting could be very strange and interesting!
I've done a LOT of dark mode work, to the point where I'd consider myself an expert here[1]. I'm not a fan of this. This solves one tiny aspect of the larger problem in a non-scalable way that will inevitably lead to bloat and inflexibility. It's a really a naive approach that hasn't taken into account design at scale, nor the future of where design is heading. Typically when doing theming, you have two axes - a visu…
For small projects that never need to "scale", this looks handy.
How does this deal with the ternary of light/dark/high-contrast that a lot of sites are now using? I wish they would just enable features that are already in the browser that they've not put live, like grid-template-rows: masonry. All three major engines have the damned thing in there but it's not in release branch.
How does this deal with the ternary of light/dark/high-contrast that a lot of sites are now using? I wish they would just enable features that are already in the browser that they've not put live, like grid-template-rows: masonry. All three major engines have the damned thing in there but it's not in release branch.
if browsers have support for a feature such as masonry, but it is not enabled in css spec does that mean it cannot be used? I recall seeing masonry in a tailwind talk, very neat!
I also check for CSS support in the browser using the "supports" feature and utilize the native support if it is enabled (e.g. Firefox behind a flag, and Safari behind a switch).
How does this deal with the ternary of light/dark/high-contrast that a lot of sites are now using? I wish they would just enable features that are already in the browser that they've not put live, like grid-template-rows: masonry. All three major engines have the damned thing in there but it's not in release branch.
There's also the light/dark/system (auto) ternary approach, which this seems to encourage the designer to ignore in favor of a binary toggle. It seems to beg the developer to treat the mode as a negation of whatever it currently is, which leads to bad results and time-dependency of setting.
p.s. love your work
color: media(min-width: 1001px, red, blue)
I think this text is wrong. https://caniuse.com/?search=light-dark does not have an entry for this yet.
I've done a LOT of dark mode work, to the point where I'd consider myself an expert here[1]. I'm not a fan of this. This solves one tiny aspect of the larger problem in a non-scalable way that will inevitably lead to bloat and inflexibility. It's a really a naive approach that hasn't taken into account design at scale, nor the future of where design is heading. Typically when doing theming, you have two axes - a visu…
Remember that the projects you work on are not typical of most CSS usage in the world. For small projects that never need to "scale", this looks handy.
https://github.com/w3c/csswg-drafts/issues/7561#issuecomment...