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

61–70 of 191 posts

Re: Dark mode in a website with CSS

#61

Post by OJFord »

Klonoar wrote: post #48
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/

Nice site, it works well on mobile, which is a bit of a pleasant surprise when it happens from personal blogs etc.!

FWIW the Twitter feed from, I assume, people you follow is a little odd though - it's not immediately clear that it's not you, nor about the article being viewed, which it doesn't necessarily have anything to do with, and it includes replies to threads. At the time of writing the top one is recommended reading that's 'racist from the start'.

Re: Dark mode in a website with CSS

#63

Post by 354896547981565 »

_bxg1 wrote: post #29
lostmsu wrote: post #13

Does not seem to work in Firefox for Android.

Do you have Android's dark mode enabled, and is your Firefox up to date? It's a pretty new CSS feature

Doesn't work for me either. Android 10, Firefox 68.1.1 and Chrome 77.0, dark mode activated.

Re: Dark mode in a website with CSS

#64

Post by _bxg1 »

354896547981565 wrote: post #63
_bxg1 wrote: post #29

Earlier quoted context omitted.

Do you have Android's dark mode enabled, and is your Firefox up to date? It's a pretty new CSS feature

Doesn't work for me either. Android 10, Firefox 68.1.1 and Chrome 77.0, dark mode activated.

Weird. It's supposed to work on Android Firefox 68; Chrome 77 is unclear:

https://caniuse.com/#search=prefers-color-scheme

Re: Dark mode in a website with CSS

#65

Post by kristofferR »

ehsankia wrote: post #30
skunkworker wrote: post #24

Earlier quoted context omitted.

I currently use 'DARK READER' for hacker news and it works quite well using the 'Filter+' theme engine.

I use the following: https://userstyles.org/styles/113994/hacker-news-dark Works great.

I've put an updated version here. This updated version is an UserCSS, which means it can be automatically enabled/disabled based on system Dark Mode setting.

https://raw.githubusercontent.com/kristofferR/userstyles/mas...

Re: Dark mode in a website with CSS

#66

Post by _bxg1 »

Klonoar wrote: post #48
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/

Indeed! Same feelings here. There's something about putting something out into the world that can be whatever you want it to be.

Re: Dark mode in a website with CSS

#67

Post by Klonoar »

OJFord wrote: post #61
Klonoar wrote: 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/

Nice site, it works well on mobile, which is a bit of a pleasant surprise when it happens from personal blogs etc.! FWIW the Twitter feed from, I assume, people you follow is a little odd though - it's not immediately clear that it's not you, nor about the article being viewed, which it doesn't necessarily have anything to do with, and it includes replies to threads. At the time of writing the top one is recommended…

Yeah, it bleeds a bit too much on mobile - younger brother passed away recently and I shoved the site out the door before heading back home to be with him. Desktop view has it more marked as separate content - e.g, that tweet is actually a Retweet with a comment, which is kind of a pain in the ass to handle from Twitter's API. Should find time to clear it up a bit I guess.

Site works well on mobile because I cannot stand sites that don't load quick + layout well on mobile, and considering the general content I post, I'd expect the audience to have the (relatively) same pet peeve.

I open sourced the activity scraper as well, if anyone's interested: https://github.com/ryanmcgrath/activity-scraper

Re: Dark mode in a website with CSS

#68

Post by wlesieutre »

_bxg1 wrote: post #47
wlesieutre wrote: post #15

Earlier quoted context omitted.

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!

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 could probably be smaller if I wanted to look into SVG optimization.

Re: Dark mode in a website with CSS

#69

Post by DoreenMichele »

chadlavi wrote: post #26
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…

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. It's a much more important thing than "I just happen to like dark color schemes."

Re: Dark mode in a website with CSS

#70

Post by comex »

defanor wrote: post #60

Sounds like good news, and similar to how Emacs handles it; do newer versions of web browsers also change the base/default colours when dark mode is used, by the way? Still not a complete replacement of global colour overriding (white flashes, or simply switching between dark and light themes often, can be quite unpleasant in a dark environment, and of course all the websites won't ever employ it, and some will use i…

> do newer versions of web browsers also change the base/default colours when dark mode is used, by the way?

iOS at least does not. Perhaps because some sites customize foreground colors but not background colors or vice versa, and they’d break if the foreground wasn’t dark or the background wasn’t light.

Post reply on HN