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

Post by extra88 » Tue, Oct 10, 2023, 12:15 PM UTC

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…

Post by hypefi » Tue, Oct 10, 2023, 12:26 PM UTC

danbruc wrote: post #49

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.

Post by c-hendricks » Tue, Oct 10, 2023, 12:52 PM UTC

the_gipsy wrote: post #46

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?

Post by miragecraft » Tue, Oct 10, 2023, 2:04 PM UTC

miragecraft wrote: post #20

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 by globular-toast » Wed, Oct 11, 2023, 6:47 AM UTC

boredhedgehog wrote: post #47

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.