Dark mode in a website with CSS • Hacker News Board

Re: Dark mode in a website with CSS

#41

Post by kristofferR » Tue, Oct 08, 2019, 8:50 PM UTC

The two best Dark Mode extensions just implemented automatic Dark Mode support (so the web goes dark automatically when Dark Mode is enabled) :D

https://github.com/darkreader/darkreader

https://github.com/openstyles/stylus (not built into release yet)

Re: Dark mode in a website with CSS

#42

Post by laughinghan » Tue, Oct 08, 2019, 8:51 PM UTC

greggman2 wrote: post #19

I recently added dark-mode support to a few sites. It took way more time then I thought it would. At first I thought "oh just add a few lines off CSS" but then ... * Some diagrams had white backgrounds Solution: remove the backgrounds so they are transparent * Most diagrams had black lines/arrows which didn't look good on dark gray backgrounds Solution: use CSS filter:invert for images * Some images are photos not di…

You know the article addresses this exact problem? It links to another article focused on this problem, which suggests reducing the saturation of images: https://medium.com/dev-channel/re-colorization-for-dark-mode...

(It doesn't seem to have occurred to that author to try reducing the brightness of the images, or reducing saturation with the saturate() instead of grayscale(), but those also seem worth trying, brightness in particular.)

Apple's Smart Invert is even simpler, it just leaves media like images and video as-is, only inverting colors of other things.

I suppose for diagrams that you know are black-on-white, inversion is nice, but it should be opt-in.

Re: Dark mode in a website with CSS

#43

Post by skunkworker » Tue, Oct 08, 2019, 8:55 PM UTC

_bxg1 wrote: post #39

skunkworker wrote: post #36

Earlier quoted context omitted.

On some sites I've used it to get a good baseline then export the CSS and modify it from there.

How do you get your browser to even load custom CSS without an extension?

Without an extension, I don’t know an easy way. You could just build your own extensions from scratch and load it there. I used it to style my own sites for dark mode.

Re: Dark mode in a website with CSS

#44

Post by saagarjha » Tue, Oct 08, 2019, 8:56 PM UTC

_bxg1 wrote: post #39

skunkworker wrote: post #36

Earlier quoted context omitted.

On some sites I've used it to get a good baseline then export the CSS and modify it from there.

How do you get your browser to even load custom CSS without an extension?

In my browser, Preferences > Advanced > Style sheet.

Re: Dark mode in a website with CSS

#45

Post by brauliobz » Tue, Oct 08, 2019, 8:57 PM UTC

skykooler wrote: post #2

How does one enable this setting in Firefox?

Set ui.systemUsesDarkTheme = 1 on about:config

Re: Dark mode in a website with CSS

#46

Post by alib » Tue, Oct 08, 2019, 8:57 PM UTC

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.

Re: Dark mode in a website with CSS

#47

Post by _bxg1 » Tue, Oct 08, 2019, 9:08 PM UTC

wlesieutre wrote: post #15

brundolf wrote: post #4

I did this recently for my new personal website! It's quite easy and really satisfying. I love doing as much as possible in stateless CSS instead of JavaScript. http://www.brandonsmith.ninja/

Mine too! Finally put up a personal site last month after not touching any web projects for a long while. I've checked out of a lot of social media and wanted my own place to put stuff and to poke around with javascript and web graphics. One of the upcoming posts is going to cover handling dark mode for content. So far I've just used transparent backgrounds with no black or white drawing so that it's visible either w…

What I did for my SVGs was use CSS to actually change the internal fill/stroke colors directly. Unfortunately you can only do this if the SVG is inlined as markup (as opposed to shown in an tag), but it's computationally much cheaper than using filters, because the latter operate on the image as a set of pixels rather than a set of shapes.

The logo design itself is really slick, though!

Re: Dark mode in a website with CSS

#48

Post by Klonoar » Tue, Oct 08, 2019, 9:09 PM UTC

brundolf wrote: post #4

I did this recently for my new personal website! It's quite easy and really satisfying. I love doing as much as possible in stateless CSS instead of JavaScript. http://www.brandonsmith.ninja/

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/

Re: Dark mode in a website with CSS

#49

Post by nattaylor » Tue, Oct 08, 2019, 9:09 PM UTC

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…

As developers, can't we use progressive enhancement to support as many scenarios as we want?

Re: Dark mode in a website with CSS

#50

Post by Y-bar » Tue, Oct 08, 2019, 9:10 PM UTC

degenerate wrote: post #32

Y-bar wrote: post #5

I’m probably not representative of the general dark mode user, I think, but I enable dark mode because I want the UI chrome out of the way to concentrate on the content. I don’t want dark content. Is there a way to disable this media query?

If you just want chrome to be dark, you can install a dark theme such as: https://chrome.google.com/webstore/detail/just-black/aghfnjk...

I think you misread

> UI chrome

Versus

> Chrome UI