Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

The Future of CSS: Easy Light-Dark Mode Color Switching with Light-Dark()

bram.us

Post reply on HN
Print view View original

41–50 of 74 posts

Re: The Future of CSS: Easy Light-Dark Mode Color Switching with Light-Dark()

#41

Post by jjcm »

stevage wrote: post #33
jjcm wrote: post #21

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.

Very true! Nonetheless this approach would also break compatibility with `color-scheme`'s custom identifiers, which is just bad in general for CSS even for these small projects. The alternative proposal I put together here would allow this to scale and still provide a helper function for small projects to use: https://github.com/w3c/csswg-drafts/issues/7561#issuecomment...

Re: The Future of CSS: Easy Light-Dark Mode Color Switching with Light-Dark()

#42

Post by wldcordeiro »

jjcm wrote: post #41
stevage wrote: post #33

Earlier quoted context omitted.

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.

Very true! Nonetheless this approach would also break compatibility with `color-scheme`'s custom identifiers, which is just bad in general for CSS even for these small projects. The alternative proposal I put together here would allow this to scale and still provide a helper function for small projects to use: https://github.com/w3c/csswg-drafts/issues/7561#issuecomment...

I appreciate that you not only have a nuanced critique but an alternative proposal as well.

Re: The Future of CSS: Easy Light-Dark Mode Color Switching with Light-Dark()

#43

Post by stevage »

jjcm wrote: post #41
stevage wrote: post #33

Earlier quoted context omitted.

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.

Very true! Nonetheless this approach would also break compatibility with `color-scheme`'s custom identifiers, which is just bad in general for CSS even for these small projects. The alternative proposal I put together here would allow this to scale and still provide a helper function for small projects to use: https://github.com/w3c/csswg-drafts/issues/7561#issuecomment...

I do like your alternative proposal.

For the viewers at home:

:root {

  color-scheme: light dark high-contrast;
}

body {

  background: scheme(light #eee, dark #333, high-contrast #fff);

}

Re: The Future of CSS: Easy Light-Dark Mode Color Switching with Light-Dark()

#44

Post by beezlewax »

jjcm wrote: post #21

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…

Jira has a dark mode??

Re: The Future of CSS: Easy Light-Dark Mode Color Switching with Light-Dark()

#45

Post by kilian »

rpastuszak wrote: post #16

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.

That is also in the works as color-contrast(): https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...

Re: The Future of CSS: Easy Light-Dark Mode Color Switching with Light-Dark()

#46

Post by the_gipsy »

jjcm wrote: post #21

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…

> shared token schema

Could you explain or give an example of what this is?

Re: The Future of CSS: Easy Light-Dark Mode Color Switching with Light-Dark()

#47

Post by boredhedgehog »

habosa wrote: post #28

I’m consistently amazed at how much energy has been put into the light/dark UI pattern for web and mobile apps. Way way more than was ever put into dealing with colorblindness or any other form of color adjustment imo. It’s nice to have the choice but I also wonder what else might have been done with all that UX/UI design and SWE time.

That seems to be linked to the spreading belief that this is a health issue instead of an aesthetic preference. Those who now believe this option somehow hurts their healthy eyes might already outnumber the actually colorblind.

Re: The Future of CSS: Easy Light-Dark Mode Color Switching with Light-Dark()

#48

Post by parasti »

habosa wrote: post #28

I’m consistently amazed at how much energy has been put into the light/dark UI pattern for web and mobile apps. Way way more than was ever put into dealing with colorblindness or any other form of color adjustment imo. It’s nice to have the choice but I also wonder what else might have been done with all that UX/UI design and SWE time.

Right? This whole affair seems very disproportionate. My bank recently announced a redesign of their online web app, and one of the major points they said they focused on was ... dark mode? Really?

Re: The Future of CSS: Easy Light-Dark Mode Color Switching with Light-Dark()

#49

Post by danbruc »

Dark mode is a weird phenomenon, I think. It kind of came out of nowhere and suddenly everything in existence started adding a dark mode and prominently listing it as a top features. That is not a complaint or anything like that, just an observation that dark mode seems to have spread in an unusual way compared to other technologies. But might of course also be just my perception.

Re: The Future of CSS: Easy Light-Dark Mode Color Switching with Light-Dark()

#50

Post by globular-toast »

I can't believe stuff like this is still difficult.

In the late 00s I wrote a frontend for a very popular open-source web project that many here would have encountered. Unlike many web projects these days, it is considered de rigueur for each instance to implement its own stylesheet. Most instances will also allow each user to select their own stylesheet.

This is trivial because the frontend was written HTML first. The HTML contains absolutely no hint at how the style should be. The navigation is just the navigation, the content is the content etc. The nav could be at the top, bottom, side, whatever you can come up. And people did all of them.

And, of course, some of those stylesheets were dark mode.

Print stylesheets were also common, which would hide all the web nav stuff when printing the document.

How did all the layers of crap added since then seem to forget this and make this quite simple concept difficult? You can't tell me it's difficult to build two stylesheets, one dark, one light, and have them both as options. And what about other accessibility options? Low contrast? High contrast? It's not just about dark and light...

Post reply on HN