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

11–20 of 74 posts

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

#11

Post by garganzol »

qingcharles wrote: post #8
DamonHD wrote: post #5

My entire automatic light/dark support is, very early in the HTML: then, in in-line CSS: @media (prefers-color-scheme:dark){body{background-color:#000;color:#eee}img{filter:brightness(.9)}} I'm not seeing this new thing as a huge win so far.

Interesting that you adjust the image brightness. I have everything set to dark mode, but I wouldn't want the images altered. Unless these are just navigational images on your site and you don't have any photos?

Images with a full dynamic range look too bright in the dark mode. I set them to 0.9 as well on my resources, otherwise the eyes are bleeding deep in the night.

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

#12

Post by allan_s »

incrudible wrote: post #7
karaterobot wrote: post #2

I guess it's better than nothing, but this does not feel like a very CSS way of solving this problem. I think I'd rather write a separate block of styles for dark mode, the way you do for other media queries. Happy to hear why that's wrong though.

It is not wrong, just annoying and error prone to write everything twice in two different places, but like you point out that is the CSS way .

It's "only" colors ? So far from 100% of your css (especially if you use something like tailwind where css class for shape and color are clearly separated)

Also I m not a css expert but can't you also simplify it by using css variables so that you can further reduce the scope of change by having only the css variables that change value ? Your --primary-color-500 etc.

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

#13

Post by userbinator »

Remember when UIs were customisable to the point that you could choose any colour for all the elements?

Now it's "you can have any colour you want, as long as it's light or dark", and all of a sudden "dark mode" is heralded as something revolutionary and new.

CSS3 even deprecated the "system colors" feature that was meant to allow the same degree of UI customisation we had before for websites too.

It's nothing but a really sad regression in empowerment, the continuing trend of treating users like cattle.

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

#14

Post by imachine1980_ »

incrudible wrote: post #10
swatcoder wrote: post #4

Oof. Unless I’m missing something, this is a convenience that doesn’t enable anything new and uses syntax/terms that don’t naturally generalize for future applications. It just embeds one recent trend in very specific, very rigid terms. This is how standards get bloated.

God forbid someone adds practical features for common use cases to our beautiful turing tarpit.

I agree with the previous comment that the current approach lacks flexibility in achieving high contrast. It might be beneficial to consider a more general and adaptable method that can accommodate different styles or even introduce primitives for different styles in the future

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

#15

Post by rpastuszak »

userbinator wrote: post #13

Remember when UIs were customisable to the point that you could choose any colour for all the elements? Now it's "you can have any colour you want, as long as it's light or dark", and all of a sudden "dark mode" is heralded as something revolutionary and new. CSS3 even deprecated the "system colors" feature that was meant to allow the same degree of UI customisation we had before for websites too. It's nothing but a…

Heh, I was thinking about this recently, but from a slightly different angle: most browsers don’t feel like user agents any more. https://untested.sonnet.io/The+modern+Web+has+lost+the+User+...

Personally, I don’t mind the light-dark function although I don’t see much utility in it, since I use variables for this sort of thing.

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

#17

Post by swatcoder »

incrudible wrote: post #10
swatcoder wrote: post #4

Oof. Unless I’m missing something, this is a convenience that doesn’t enable anything new and uses syntax/terms that don’t naturally generalize for future applications. It just embeds one recent trend in very specific, very rigid terms. This is how standards get bloated.

God forbid someone adds practical features for common use cases to our beautiful turing tarpit.

You can have both. But good tool design looks at the horizon, not just at your feet.

You could deliver the same convenience in a way that’s set up to be repurposable (fullcolor /rgcolorblind) or extensible (light / grey / dark / …n) with as little difference as choosing a more mindful name.

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

#19

Post by dackerlunghack »

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.

[dead]

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

#20

Post by miragecraft »

swatcoder wrote: post #4

Oof. Unless I’m missing something, this is a convenience that doesn’t enable anything new and uses syntax/terms that don’t naturally generalize for future applications. It just embeds one recent trend in very specific, very rigid terms. This is how standards get bloated.

I agree.

You can already do this using the space toggle technique:

:root { --dark: ; }

@media (prefers-color-scheme: dark) { --light: ; --dark:initial; }

.example { color: var(--light, #000) var(--dark, #fff); }

Post reply on HN