Using Dark Mode in CSS with MacOS Mojave • Hacker News Board

Re: Using Dark Mode in CSS with MacOS Mojave

#101

Post by int_19h » Thu, Oct 25, 2018, 6:57 PM UTC

morley wrote: post #69

stephenr wrote: post #63

Earlier quoted context omitted.

More javascript is almost never the best solution to any problem, particular when it’s shown that css can achieve the same result.

My argument is that CSS doesn't achieve the same result; it forces one particular mode on you instead of allowing a choice.

The right place for the switch in this case is the browser. The browser should have a button for light/dark/system, defaulting to system. And CSS should follow that.

JS should not be involved, and we don't need every site to have its own version of the switch, located in a different place and looking different.

Re: Using Dark Mode in CSS with MacOS Mojave

#102

Post by EugeneOZ » Thu, Oct 25, 2018, 7:25 PM UTC

mixmastamyk wrote: post #86

EugeneOZ wrote: post #22

Cmd+F5, "Invert colors" (smart invert) This will turn everything into dark mode, except images and video. And you don't have to care if site has that line in CSS. Also, when you switch back - everything is in "light mode" again, including OS UI.

Is that for Safari? How long has it existed?

It's system-wide. Sorry, wrong shortcut, Alt+Cmd+F5.

Re: Using Dark Mode in CSS with MacOS Mojave

#103

Post by lostgame » Thu, Oct 25, 2018, 7:29 PM UTC

modernerd wrote: post #8

This is a great blog post to build awareness of the prefers-color-scheme feature. But I don't think it's safe to assume that someone who sets a dark UI also wants web pages displayed like that. I set dark mode in macOS to have the UI fade into the background and reveal the content; I don't want or expect that websites will present white text on a dark background too. That's fine for coding but can be less readable fo…

"But I don't think it's safe to assume that someone who sets a dark UI also wants web pages displayed like that."

I don't think it's safe to assume they don't. I can't stand web pages in general that are white background/black text.

I've coded in black background / white (or coloured) text for about two decades now, and I'm so glad Apple is making the dark theme a standard at this point. There's literally thousands of articles about the eye strain that's caused from the poor decision to present information this way. We don't need literally at this point millions of photons screaming light at our faces at more than 300 nits every moment.

Re: Using Dark Mode in CSS with MacOS Mojave

#104

Post by lostgame » Thu, Oct 25, 2018, 7:39 PM UTC

crazygringo wrote: post #100

I'm not sure I can take it anymore. Websites are just getting too complicated to design and build. First it was desktop with mouse -- easy. Then responsive design requiring both desktop and mobile layouts, as well as interaction design with both mouse and touch. Now what if users start expecting both light and dark versions of websites? "We show the mobile version of the menu with its own hover on small screens only,…

I think the largest issue with this is it is currently a Safari-only, and an early Safari-only release at that. And that the latest MacOS right now is the only major commercial OS offering a dark theme to the extent that it does.

A quick look at Safari's desktop browser market share reveals it to be about 4% right now. When this kind of standard makes its way into Chrome and/or FF, it'll be relevant.

Until then, it's a toy, and nothing more. Nobody could ever realistically expect this kind of thing. It doesn't increase the complexity of web design by that much. If you think adding CSS exceptions for inverted colours is the straw that broke the camel's back on web complexity for you, perhaps you just feel like we should've stuck with the late 90's or worse, early 00's web standards?

Many websites, even YouTube, already have a 'night' or 'dark' switch. It makes a lot of sense, and genuinely is not that hard to implement.

Re: Using Dark Mode in CSS with MacOS Mojave

#105

Post by dawnerd » Thu, Oct 25, 2018, 7:49 PM UTC

I love me a good dark mode but what I can’t stand is when designers get lazy and think dark mode = jet black with white text. Latest tweetbot is a great example.

Re: Using Dark Mode in CSS with MacOS Mojave

#106

Post by nine_k » Thu, Oct 25, 2018, 8:06 PM UTC

crazygringo wrote: post #100

I'm not sure I can take it anymore. Websites are just getting too complicated to design and build. First it was desktop with mouse -- easy. Then responsive design requiring both desktop and mobile layouts, as well as interaction design with both mouse and touch. Now what if users start expecting both light and dark versions of websites? "We show the mobile version of the menu with its own hover on small screens only,…

Multiple alternative CSS files were a thing in early 2000s. But browsers never developed support for them. Now some sites offer switchable "themes", tough.

Re: Using Dark Mode in CSS with MacOS Mojave

#107

Post by reaperducer » Thu, Oct 25, 2018, 8:12 PM UTC

morley wrote: post #69

stephenr wrote: post #63

Earlier quoted context omitted.

More javascript is almost never the best solution to any problem, particular when it’s shown that css can achieve the same result.

My argument is that CSS doesn't achieve the same result; it forces one particular mode on you instead of allowing a choice.

You don't need Javascript to implement a switch that changes from light mode to dark mode. That can be easily done in CSS. I've done it on web sites to switch to a high-contrast color scheme for people with vision difficulties.

Re: Using Dark Mode in CSS with MacOS Mojave

#108

Post by saagarjha » Thu, Oct 25, 2018, 8:36 PM UTC

lostgame wrote: post #104

crazygringo wrote: post #100

I'm not sure I can take it anymore. Websites are just getting too complicated to design and build. First it was desktop with mouse -- easy. Then responsive design requiring both desktop and mobile layouts, as well as interaction design with both mouse and touch. Now what if users start expecting both light and dark versions of websites? "We show the mobile version of the menu with its own hover on small screens only,…

I think the largest issue with this is it is currently a Safari-only, and an early Safari-only release at that. And that the latest MacOS right now is the only major commercial OS offering a dark theme to the extent that it does. A quick look at Safari's desktop browser market share reveals it to be about 4% right now. When this kind of standard makes its way into Chrome and/or FF, it'll be relevant. Until then, it's…

Chrome and Firefox might end up implementing this to serve their users on macOS.

Re: Using Dark Mode in CSS with MacOS Mojave

#109

Post by deanclatworthy » Thu, Oct 25, 2018, 8:37 PM UTC

I think this is great. No-one is forcing you to implement this and if you do change a few colours here and there to benefit those users who use dark mode - it'd be hugely appreciated.

And for those worried about adding weight to your page just explicitly use the media query and put the over-rides in a separate file:

Re: Using Dark Mode in CSS with MacOS Mojave

#110

Post by saagarjha » Thu, Oct 25, 2018, 8:39 PM UTC

untog wrote: post #96

matchbok wrote: post #88

Earlier quoted context omitted.

Sad to realize that if Slack had a real, native app, most of the conversion would be a simple toggle.

Not really. Slack would have to have a real, native app that used exclusively stock OS controls. I very much doubt they'd do that, so there would still be a lot of work required to implement dark mode.

Most Cocoa apps use system controls.