Live data from Hacker News

Dark mode in a website with CSS

tombrow.com

171–180 of 191 posts

Re: Dark mode in a website with CSS

#171
post #58
post #3

Earlier quoted context omitted.

It's OS-level. macOS, iOS, Android, and I believe Windows 10 will all send this signal now to whichever (modern) browser you're using.

As will Linux/Gnome.

Any idea how to set this on Ubuntu? I have what I assume is the dark theme - title bars are white text on dark grey background - but this website displays a light theme in Firefox.

Re: Dark mode in a website with CSS

#172
post #132

I love dark mode as a user, but as a developer it terrifies me how much complexity is involved in programming in 2019. At a stroke, it doubles the number of possible combinations of: - 2 device sizes: desktop vs mobile (e.g. responsive) - 3 platforms: web vs iOS vs Android, or web vs Windows vs macOS vs Linux (not even counting cross-browser or OS version quirks), or god forbid all of the above - 2 input methods: hov…

Shouldn’t the color scheme be orthogonal to input methods, platforms, and device sizes? I can’t think of any times I have changed colors specifically for any of those things.

I can design the same dark color scheme for iOS and Android, but I've still got to code it twice.

Or use the same dark colors for mobile-size and desktop-size in responsive, but still need to test it to make sure I got all the s that appear in mobile-size but get hidden and/or replaced by other s in desktop-size and vice-versa.

Or discover we thought we'd covered everything, but when you use the normally-touch interface with a trackpad on Chromebooks, the default hover state is still light-mode.

Etc.

Re: Dark mode in a website with CSS

#173
post #81

Earlier quoted context omitted.

Imagine: the original idea used to be you'd just supply a reasonably-marked-up document and maybe some formatting suggestions and the browser/user would pick the colors and fonts and such.

And those browser set styles were disgusting so people decided to just style everything themselves

Okay, but they only did that because browsers put tools like CSS/JS in their hands to let them.

I think it was a bad choice on the browsers' part. It's a totally abdication of the browser's responsibility to render things nicely and configurably for the user. Worse, javascript is bundled malware: you're letting websites execute arbitrary code on the user's machine.

Tracking, terrible website accessibility, and various dark patterns are a direct result of this. Instead of forcing websites to conform to a document format and giving users control over how that document behaves and is rendered, browsers given those powers to websites, and unsurprisingly, this has resulted in user-hostile behaviors. And it's not all peachy for websites either: websites can do a lot more with CSS/JS, but websites also have to do a lot more.

One of my side projects is a web browser which accepts various document types (i.e. image, slide show, article, login form) and renders them. Style/behavior is configurable by the user when possible, but the site serving the document has no control over styling/behavior--they only get to serve up documents which conform to the semantics of the document type. I doubt this will ever take off, but it's been an interesting and fun project so far.

Re: Dark mode in a website with CSS

#174
post #48

Earlier quoted context omitted.

Did this about six months ago over at my site. Was annoying to get it right but glad I did. Some people find these kinds of sites pointless these days, but I enjoy keeping one even if I rarely update it anymore. Spirit of the web and all that. https://rymc.io/

Irrelevant but I wanted to thank you for the Old Reddit extension for Safari. That makes Reddit somewhat bearable again, although it still seems to lag while it loads their stupid new UI before doing the redirect (not sure if there's any way to avoid that).

Glad it helps! I hate when extensions aren't ported to Safari, so I just decided I'd do it myself. shrug

Sadly Safari's API isn't that great compared to those found in Chrome/Firefox; there's no way to catch the url before the page actually loads. I inject some JS to catch and redirect as fast as possible, but sometimes you'll see a flash of the new Reddit experience. If a better API becomes available at some point I'd gladly swap it out. :)

Re: Dark mode in a website with CSS

#176
post #166

Earlier quoted context omitted.

Conversely, that's what's amazing about the Web, right? Whenever people introduce any of those things, like when iOS was introduced, they had to decide how to port all the existing content and interactions and widgets to mobile and touch interfaces. As a result, if an entrepreneur or hobbyist makes an app on one platform and wants it to be at least minimally usable on another platform, the Web way, way lowers the bar…

The particular methods for making CSS backwards compatible are specific to the web, but the general problems faced by having user display preferences are not. Adding these features to native apps blows up your testing matrix there, too. In many ways, it's even worse. I've got OS settings here for "increase contrast", "reduce transparency", "use grayscale", "invert colors", and (because areas of native windows can be…

And yet Xcode is very successful and well-liked, or at least if it's hated, it's not for the flaw you found.

Doubtless many, many other apps have also made that same mistake, yet I highly doubt it has made the difference between success and failure for even a single one of them.

All of those OS features were introduced to help people, because people wanted them, some even needed them. I don't think we live in a worse world for having them, and I believe that dealing with features like those would actually be even harder in a world without the Web.

Re: Dark mode in a website with CSS

#177

I apologize for my ignorance, but could somebody explain the need for dark mode? I know that it's bad to have a phone glow in your face when your eyes are adjusted to the dark, but don't most phones automatically lower the brightness? That seems to work well enough for me. Perhaps a specific dark mode could do it better, if well designed, but most sites have a hard enough time doing one good color scheme. I know some…

There's a good discussion of "why dark mode" in the article that mine links to: https://web.dev/prefers-color-scheme#why-dark-mode

Re: Dark mode in a website with CSS

#178
post #158

One of my (maybe unwarranted) concern with automatic dark mode, is the potential ability of the browser and apps to determine my (very) coarse location based on when the dark mode is enabled or not, as it because another potentially identifying info among others. Does that kind of CSS allows a script to determine if the browser is displaying dark mode or not, or send back that information to ads servers?

Yes, you could craft CSS to conditionally load an image based on the media query. This would let a server observe the client's setting.

Re: Dark mode in a website with CSS

#180
post #58

Earlier quoted context omitted.

As will Linux/Gnome.

Any idea how to set this on Ubuntu? I have what I assume is the dark theme - title bars are white text on dark grey background - but this website displays a light theme in Firefox.

It depends on your Gtk theme, I think. If it's marked as dark, then Firefox will pick that up and apply the CSS accordingly. I use Yaru-dark.

You can also force Firefox, via an about:config setting to act as if you were using dark mode.

Post reply on HN