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

Dark mode in a website with CSS

tombrow.com

Post reply on HN
Print view View original

81–90 of 191 posts

Re: Dark mode in a website with CSS

#81

Post by shantly »

crazygringo wrote: post #38

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…

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.

Re: Dark mode in a website with CSS

#82

Post by baroffoos »

jgtrosh wrote: post #56
chadlavi wrote: post #26

Earlier quoted context omitted.

Why mess with content colors? Just leave the images.

The problem is very simple: if you have diagrams with black lines on transparent background it doesn't work with dark background. Many colour choices we do make less sense for dark backgrounds than for light ones. The comment above properly describes the breadth of real problems you might face.

The easy option is to just put a white background behind the diagrams. It might not be as pretty as having the image designed right for a black background but its better than that hack.

Re: Dark mode in a website with CSS

#83

Post by baroffoos »

shantly wrote: post #81
crazygringo wrote: post #38

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…

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

Re: Dark mode in a website with CSS

#84

Post by jacurtis »

arjunkomath wrote: post #51

It's not widely available yet, https://caniuse.com/#search=prefers-color-scheme

True, but does it have to be?

The beauty of this setting is that it falls back 100% gracefully. Basically if your OS and/or browser doesn't support it, then you just see the "normal" version of the site.

Because Dark Mode is only available on newest versions of most operating systems, it is also reasonable to assume that the people running a dark mode compatible device would have a modern browser.

So all-in-all, I think compatibility is a moot issue.

Re: Dark mode in a website with CSS

#87

Post by shantly »

baroffoos wrote: post #83
shantly wrote: 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

To be fair, the styles they chose were almost never any better than the defaults until the early 2000s or so (and even then it was hit-or-miss) by which time the dream of the web as hyperlinked documents the user could view as they pleased was falling out of fashion in favor of making it flashy brochureware and, soon after, a tightly specified app distribution platform.

Re: Dark mode in a website with CSS

#88

Post by suyash »

crazygringo wrote: post #38

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…

That's a nice way of breaking down the various designs one has to support, 48 is actually quite a lot.

Re: Dark mode in a website with CSS

#89

Post by JDiculous »

The problem is that this doesn't let the user toggle dark mode on/off.

If you want the user to be able to toggle dark mode on your site without changing their Operating System preferences, then you'll need to implement your dark theme as a class (eg. body.theme-dark) since there's no way to dynamically set the media query.

  const darkMode = window.matchMedia('(prefers-color-scheme: dark)')
  if (darkMode) {
    document.body.classList.add('theme-dark')
  }
If you have to write your dark theme CSS as a separate class, then there's no sense in duplicating that logic inside the media query and having to override it when the user toggles it. So I ended up using that Javascript instead of putting the styles in the media query.

It's a shame, I would've preferred a pure HTML/CSS solution.

Re: Dark mode in a website with CSS

#90

Post by jacurtis »

alib wrote: post #46

Not working on Firefox for iOS. Can anyone else confirm this to be the case? Looks as though Firefox for iOS does support ‘prefers-color-scheme’ media query.

I can confirm that dark mode does not work on iOS Firefox.

I tested it a month ago and figured an update was coming soon. But I just tested it again on iOS 13.1 with everything up to date and still no luck. Safari works as my control.

Post reply on HN