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

71–80 of 191 posts

Re: Dark mode in a website with CSS

#71

Post by _bxg1 »

wlesieutre wrote: post #68
_bxg1 wrote: post #47

Earlier quoted context omitted.

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!

Ooh, that's an interesting idea that I hadn't considered! My page is pretty computationally lightweight to start with (no 3rd party javascript) but if I'm ever in the mood for some unnecessary optimization that sounds like a fun one to experiment with. Trade-off is slightly more data to send with each page, since you have to inline the SVG rather than having it cached after the first load. But it's a whole 2kb and co…

I've had CSS filters alone cause noticeable lag on certain machines in the past; they can really pound the GPU. That was a few years ago though, and on a bigger image. Also, I think I was using a blur filter, which is much more intensive than a simple color filter. So probably still not worth worrying about :)

Re: Dark mode in a website with CSS

#72

Post by chrismorgan »

I recently added dark mode support with a new website for myself, using (prefers-color-scheme: dark) by default, but also allowing the user to switch between light and dark mode if they have JavaScript enabled. It also supports switching image sources in dark mode, so that I can use a dark mode screenshot in dark mode, and light in light. (I haven't yet published the draft article I have using this feature.)

I wrote about it at https://chrismorgan.info/blog/dark-theme-implementation/.

Re: Dark mode in a website with CSS

#73

Post by tenryuu »

chrismorgan wrote: post #72

I recently added dark mode support with a new website for myself, using (prefers-color-scheme: dark) by default, but also allowing the user to switch between light and dark mode if they have JavaScript enabled. It also supports switching image sources in dark mode, so that I can use a dark mode screenshot in dark mode, and light in light. (I haven't yet published the draft article I have using this feature.) I wrote…

SteamDB also recently added this too, but it also doesn't require JavaScript, as it's based in the cookie. The toggle does use JavaScript if you do have it enabled

Re: Dark mode in a website with CSS

#74

Post by pedrocr »

So that's why sites have been annoyingly turning dark lately. In Firefox apparently this can be disabled by creating a new integer preference in about:config called "ui.systemUsesDarkTheme" and setting it to 0.

Re: Dark mode in a website with CSS

#75

Post by cbsks »

petepete wrote: post #59
IAmGraydon wrote: post #57

Earlier quoted context omitted.

My wife would be very grateful as I read Hacker News in bed every night and it lights the whole room up with all its white pixels.

Have you tried inverting the colours?

That’s a good idea! On iOS I configured the Accessibility Shortcut to enable Smart Invert when I triple-click the home button, and it looks like it will work perfectly!

Re: Dark mode in a website with CSS

#76

Post by ognarb »

I did this for the KDE wikis {userbase,techbase,community}.kde.org, this was a lot harder than I first thought, because of the amount of user contributed content with white background, hardcoded color in the text.

I wrote about it here: https://carlschwan.eu/2019/07/12/new-userbase.html

Re: Dark mode in a website with CSS

#77

Post by dageshi »

DoreenMichele wrote: post #69
chadlavi wrote: post #26

Earlier quoted context omitted.

Why mess with content colors? Just leave the images.

If you have a lot of images with white backgrounds, that's going to defeat the purpose of Dark Mode. Some people prefer dark mode because they suffer migraines and bright lights are a problem when they have a migraine. Or homeless people may be using it for both stealth purposes and battery conservation when they have limited opportunities to recharge. For some people, this preference is not just some minor detail. I…

Do you not think maybe that people with migranes and homeless people conserving battery might be edge cases just a little bit too far to worry about?

Because I do. And I'm someone who runs permanent dark mode via plugins in firefox due to eye strain/headaches. I don't expect the world to bend over backwards and I certainly don't expect people to recolour image backgrounds for me. The plugins do a good enough job.

Re: Dark mode in a website with CSS

#79

Post by DoreenMichele »

dageshi wrote: post #77
DoreenMichele wrote: post #69

Earlier quoted context omitted.

If you have a lot of images with white backgrounds, that's going to defeat the purpose of Dark Mode. Some people prefer dark mode because they suffer migraines and bright lights are a problem when they have a migraine. Or homeless people may be using it for both stealth purposes and battery conservation when they have limited opportunities to recharge. For some people, this preference is not just some minor detail. I…

Do you not think maybe that people with migranes and homeless people conserving battery might be edge cases just a little bit too far to worry about? Because I do. And I'm someone who runs permanent dark mode via plugins in firefox due to eye strain/headaches. I don't expect the world to bend over backwards and I certainly don't expect people to recolour image backgrounds for me. The plugins do a good enough job.

In the U.S., more than 38 million people have migraine disease, with some estimates suggesting that this number may be even higher, impacting as many as 50 million or more. Some migraine studies estimate that 12 percent of adults in the U.S. population have migraine, and 4 million have chronic migraine.

https://migraine.com/migraine-statistics/

Re: Dark mode in a website with CSS

#80

Post by quickthrower2 »

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…

Every time I think "oh just add a few lines off CSS" => 90% chance it'll take all day.
Post reply on HN