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

21–30 of 191 posts

Re: Dark mode in a website with CSS

#21

Post by _bxg1 »

fphilipe wrote: post #17
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/

Same here: https://phili.pe/ I've used CSS variables though, which make it even simpler. E.g. I have `--page-background-color` and `--text-color-primary` that are set to a certain default value. In dark mode, these variables are set to other values, removing the need to redefine the actual selectors.

Me too! CSS variables rock.

Re: Dark mode in a website with CSS

#22

Post by uallo »

Here is another article that goes much deeper into how to actually use CSS to implement the dark mode. While it does not rely on the media query (the article is almost 17 months old after all), it shows many other CSS features you could use.

https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955...

Re: Dark mode in a website with CSS

#23

Post by ripley12 »

saagarjha wrote: post #20
ripley12 wrote: post #18

Shameless plug: I did the same thing to my personal website and wrote about it with light/dark screenshots: https://www.reillywood.com/blog/dark-mode/ I like working in Solarized Dark, so I wanted my website to serve up Solarized Dark. I dim images in dark mode too, but I turn them up to full brightness on hover.

I only use Solarized for code snippets on my website, but the benefit of using it as a color scheme is that switching between the two is a one line addition: only the background needs to respond to prefers-color-scheme.

Yeah, that would be nice for UIs that can use Solarized Light. I experimented with it as a full UI, but it just didn't look quite right to me – I ended up only using it for light mode code snippets.

Re: Dark mode in a website with CSS

#26

Post by chadlavi »

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.

Re: Dark mode in a website with CSS

#30

Post by ehsankia »

skunkworker wrote: post #24
cbsks wrote: post #16

Now if only Hacker News would implement it!

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.

Post reply on HN