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

Using Dark Mode in CSS with MacOS Mojave

paulmillr.com

Post reply on HN
Print view View original

111–120 of 128 posts

Re: Using Dark Mode in CSS with MacOS Mojave

#111

Post by favorited »

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.

It's honestly not much dev work at all (took me a couple days on a medium size app). The real time sink is with design, because virtually any custom color you're using in the application will need a dark variant.

Re: Using Dark Mode in CSS with MacOS Mojave

#112

Post by favorited »

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.

The system dark mode is very different from invert colors.

Re: Using Dark Mode in CSS with MacOS Mojave

#113

Post by shurcooL »

konradzikusek wrote: post #44
shurcooL wrote: post #43

Woohoo, I’ve been waiting for this. Will it be possible to figure out the appearance preference with JacaScript as well?

Every media query can be checked using JS - `matchMedia('(prefers-color-scheme: dark)').matches` => true/false

Excellent, thanks. I see this is mentioned in the original article too; I must've missed it.

Re: Using Dark Mode in CSS with MacOS Mojave

#114

Post by Insanity »

aczerepinski wrote: post #56
ikfmpwdsoz wrote: post #46

Earlier quoted context omitted.

What do you mean by "higher value"? Getting IE11 to work will net you an extra 2.85% of the market, but adding a very minor feature that's only usable by Safari users doesn't seem to be profitable at all.

By higher value, I mean they spend more money.

Not sure if you could back that up. I assume you say this because tech-savvy people will not use IE?

But that is assuming the content is aimed at this group.

Re: Using Dark Mode in CSS with MacOS Mojave

#115

Post by 3pt14159 »

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,…

Websites aren't really getting complicated to design if you treat them the way they were originally designed: As a network of documents.

It's once you try to app-ify them that things break down. Though really, with this new dark mode I just wish I could set a max whitepoint. I code in the dark but too much of the web is bright and I constantly have to change my brightness going between the two. I don't want a third party pluggin. I just want Apple to do it. The have it on the iPhone and it works great there.

Re: Using Dark Mode in CSS with MacOS Mojave

#116

Post by xvector »

sneak wrote: post #61

I, for one, am tired of web pages being able to know things about the environment in which I view them outside of their sandbox. Orientation, battery, point:pixel ratio, user-agent, referer- now UI display preferences. I should be able to turn all of these off and make my browser indistinguishable from any other save for IP address if I so choose. This stuff just keeps rolling down the fingerprinting hill. Pretty soo…

Canvas fingerprinting along with most of these issues were solved with Safari 12 on both Mac OS and iOS. If you don't want to be fingerprinted, consider switching to it.

Obviously there are some things that aren't yet anonymized in Safari 12, but it's good enough.

Re: Using Dark Mode in CSS with MacOS Mojave

#117

Post by mixmastamyk »

3pt14159 wrote: post #115
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,…

Websites aren't really getting complicated to design if you treat them the way they were originally designed: As a network of documents. It's once you try to app-ify them that things break down. Though really, with this new dark mode I just wish I could set a max whitepoint. I code in the dark but too much of the web is bright and I constantly have to change my brightness going between the two. I don't want a third p…

Yes, most folks forget the original background color of the web was #ccc with black text. Readable day or night.

Re: Using Dark Mode in CSS with MacOS Mojave

#118

Post by mixmastamyk »

leppr wrote: post #94
red-tea wrote: post #23

Earlier quoted context omitted.

No. This is a different thing. The problem is when people haven't coded their CSS correctly and assume default background is white and then set a non default foreground of black or something. Those sites will still break for dark themes even with this API. In fact, if people actually understood the first C in CSS, this thing wouldn't even be necessary.

Dunno why you're being downvoted. This indeed is a very widespread problem. Even some Google services (like Google Docs) have it.

It generally happens when the site specifies the forgeround or background color but not both, leading to very low contrast.

Re: Using Dark Mode in CSS with MacOS Mojave

#119

Post by TheAceOfHearts »

For those that are unaware: Firefox still supports alternative style sheets [0]. Unfortunately it's pretty well hidden, and I think it's unsupported by other browsers. One of the things I love about this feature is that it gives users the choice.

It's a damn shame that CSS System Colors [1] was deprecated. There's also System font values [2], even if it's barely used. I really like my system styles and I wish more web services could use similar element sizes and colors. A few years back using the system font for UI elements started to gain a bit of popularity [3] [4]. WebKit even added improved support for using system fonts in web content [5], although I don't know what state that's in. I understand that exposing more system information can be used for fingerprinting, but why can't I be the one to decide what information I expose? You could expose standard color values by default and allow me to whitelist trusted websites to access real system styles.

I've thought about this a bit, and I wish websites could have different "modes" which you could switch to. I think it would make it much easier to develop and design websites that target devices with drastically different requirements. You usually want a desktop mode which is designed for use with a keyboard and mouse, and a mobile mode which is designed for use with a touch interface. The closest thing we have is the "desktop mode" switch on mobile browsers, but I think that depends on user-agent sniffing which is incredibly hacky.

I'm typically not a fan of mobile first designs, since it usually leads to a worse experience for desktop users. Using media queries with viewport size break points is usually not what you want. For example, sometimes I want to reference some API docs so I'll resize the window to be incredibly narrow and place it next to my editor. Tons of websites take this narrow screen size to mean that I'm on mobile and drastically blow up the size of the text and UI elements, causing me to lose my position in the document. This is incredibly frustrating.

Things are improving, though. Now you can use CSS media feature tests to check if the user has a pointing device [6] and if they can hover over elements [7]. Although I still think designing a website that handles all variations well is nigh impossible. Even worse, these values cannot be changed by the user! For example, imagine an advanced image editing app meant for use with a mouse. If I'm on mobile the browser could let me interface with it by providing a virtual trackpad. It might not be a great experience, but if the operation I'm doing is really simple it might be enough.

I think I'd prefer it if you could use a link tag to expose different versions of the same document, and allow the user to chose which version they prefer. Aside from providing a desktop and mobile version you could also link to an API or data view which is designed for easier consumption by computers. Another neat use for this could be to provide EPUB or PDF links for online books; you can keep reading the online version or download the full version for later.

[0] https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative...

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...

[2] https://developer.mozilla.org/en-US/docs/Web/CSS/font#System...

[3] https://www.smashingmagazine.com/2015/11/using-system-ui-fon...

[4] https://css-tricks.com/snippets/css/system-font-stack/

[5] https://webkit.org/blog/3709/using-the-system-font-in-web-co...

[6] https://developer.mozilla.org/en-US/docs/Web/CSS/@media/poin...

[7] https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hove...

Re: Using Dark Mode in CSS with MacOS Mojave

#120

Post by scroblart »

ThomPete wrote: post #57
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…

Exactly! That's my take on this too. Dark Mode should only be for UI elements not for actual content. They would never do that with a PDF either.

It is nice to have the option of map pdf colors to correspond to one's color theme.

I like to read pdfs in emacs alongside my notes, and I am very pleased that emacs' pdf-tools allows me to map colors as I choose (kind of - there are only two colors, foreground and background).

Post reply on HN