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

Ask HN: Dark mode for HN please?

news.ycombinator.com

Post reply on HN
Print view View original

351–360 of 469 posts

Re: Ask HN: Dark mode for HN please?

#351

Post by mrep »

For desktop, I use the refined hacker news extension (github: [0], show HN for it: [1]) which allows you to set custom CSS. It has a dark mode setting but I prefer the following CSS which makes the entire background black and the text white (Screenshot: https://imgur.com/a/2lcy1Ga):

  :root,
  html { 
     background-color: white;
     filter: invert(100%);
  }
  
  * { 
     background-color: inherit;
  }
Another great thing about the extension is when you go back to the same thread, it gives a little highlight to new comments that you haven't seen before so you can quickly find them. Only downside is that that doesn't work for comments after the first page.

[0]: https://github.com/plibither8/refined-hacker-news

[1]: https://news.ycombinator.com/item?id=20173974

Re: Ask HN: Dark mode for HN please?

#353

Post by II-V-I »

While we're on the topic of styling, why is the default font size so small? The comment size is 12px. In my view, that's like sub/superscript or caption size, not body copy.

I regularly zoom to 150% on HN or use a bookmark that sets styles via JS so I don't have to strain while reading. Am I the only one? And no, I don't need glasses!

Re: Ask HN: Dark mode for HN please?

#354

Post by epicalex »

kleiba wrote: post #285

I must have some condition (other than old age) but I cannot look at dark-themes for more than a few seconds before my eyes start hurting. I switch it to a light theme wherever possible. Yet, I know of the popularity of dark themes. But I wonder if I'm the only one or whether there are more people that experience the same effect? I think it gets worse when I have to switch between mostly-dark content to mostly-light…

It's not just you. I don't have any sources to link to, but 15 years ago a website was frowned upon for having light text on an (almost) black background because it was bad for readability and made your eyes strain.

I tended to agree and find this dark mode craze quite curious because of how the industry has completely flipped its opinion.

Maybe someone has sources/studies that contradict this, but that's my memory of the situation.

Re: Ask HN: Dark mode for HN please?

#355

Post by haack »

monokai_nl wrote: post #297

I took a shot at it: https://monokai.nl/lab/hacker-news/hn-dark1.png https://monokai.nl/lab/hacker-news/hn-dark2.png https://monokai.nl/lab/hacker-news/hn-dark3.png The principles I followed: - Alligator energy. No need to redo the layout or apply the latest design trends. HN is fine as is. - Respect the original design. The dark version uses the same color hierarchy as the elements in the original design. - No-nonse…

Good job preserving the HN spirit!

My only feedback is the gray text (#808080) on the dark gray background (#222222), has a contrast ratio of ~4:1 which some people may find difficult to read (and slightly below WCAG recommendation for regular text[1]). I think you can lighten the text slightly without disrupting the surrounding color hierarchy.

[1] https://webaim.org/resources/contrastchecker/

Re: Ask HN: Dark mode for HN please?

#356

Post by pwdisswordfish2 »

tough wrote: post #324
pwdisswordfish2 wrote: post #306

Earlier quoted context omitted.

"... which can't be said about most modern websites." While I understand and agree with your point, I have personally found this quoted portion to be a false assumption. To me, "works" means I can retrieve the content of the page without using JS. If the websites we are discussing are ones where the primary purpose is reading, like HN, most will "work" for me without JS, so long as I do not rely on try using a "moder…

Any newspaper website with a paywall or cookiewall or anti-adblock thingy maybe? That's not much readable without some trickery

Not trickery, just avoid using "modern browser" to make the HTTP request.

Name any newspaper website you think is "not much readable" without Javascript or cookies and I can prove that is a false assumption.

Re: Ask HN: Dark mode for HN please?

#357

Post by deleerium »

tallgiraffe wrote: post #223
deleerium wrote: post #100

Earlier quoted context omitted.

Screenshot: https://imgur.com/a/mxaNky4 Whipped this up real quick... keeps the spirit of HN I think, and is pretty minimal. Not my best CSS but tables/current CSS make some selectors a little tricky and after all, it's less than 1kb added, no markup or stack changes needed, and this is 'Hacker News' right? :D @media (prefers-color-scheme: dark) { body { background-color: #1F2430; } #hnmain { background-color: #23283…

Love this. One addition, consider reducing the brightness on text so it doesn't glare as much.

Tricky balance there. I was going for good contrast even when screen is dimmed or color shifted (think night modes, f.lux, etc.

Maybe try to swap the #fafafa rule with #eaeaea? Does that feel better? It's still very high contrast so maybe that could be a happy medium.

Re: Ask HN: Dark mode for HN please?

#358

Post by deleerium »

rptr-gfx wrote: post #278
deleerium wrote: post #100

Earlier quoted context omitted.

Screenshot: https://imgur.com/a/mxaNky4 Whipped this up real quick... keeps the spirit of HN I think, and is pretty minimal. Not my best CSS but tables/current CSS make some selectors a little tricky and after all, it's less than 1kb added, no markup or stack changes needed, and this is 'Hacker News' right? :D @media (prefers-color-scheme: dark) { body { background-color: #1F2430; } #hnmain { background-color: #23283…

Thanks for this. This is the best dark mode skin i found yet. Can I create stylus theme out of this share it?

Yea of course it's just CSS :D

Re: Ask HN: Dark mode for HN please?

#359

Post by mrep »

deleerium wrote: post #100
dang wrote: post #32

Ok, you guys, this isn't the first time we've heard this request ( https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que... ). I'm willing to do it (edit: not to change the default! just to add the option). It's just that any CSS issue that goes more than a quarter-inch deep is outside both my expertise and my interest. We can add CSS to https://news.ycombinator.com/news.css for prefers-color-scheme: dark , bu…

Screenshot: https://imgur.com/a/mxaNky4 Whipped this up real quick... keeps the spirit of HN I think, and is pretty minimal. Not my best CSS but tables/current CSS make some selectors a little tricky and after all, it's less than 1kb added, no markup or stack changes needed, and this is 'Hacker News' right? :D @media (prefers-color-scheme: dark) { body { background-color: #1F2430; } #hnmain { background-color: #23283…

I prefer it straight black which this minimal CSS does (Screenshot: https://imgur.com/a/2lcy1Ga)

  :root,
  html { 
     background-color: white;
     filter: invert(100%);
  }
   
  * { 
     background-color: inherit;
  }

Re: Ask HN: Dark mode for HN please?

#360

Post by deleerium »

franz899 wrote: post #298
deleerium wrote: post #192

Earlier quoted context omitted.

For those who want something more traditional I've modified to have a slight orange tint on the title bar, and higher contrast for text. Seems to be better for a11y too. Screenshot: https://imgur.com/a/XW1OCYb @media (prefers-color-scheme: dark) { body { background-color: #232834; } #hnmain { background-color: #1F2430; } a:link.storylink, #hnmain > tbody > tr:first-child > td a, .commtext, .commtext a:link, td { colo…

Thank you, it looks good I've added this code to fix the reply textarea colour: .fatitem textarea { background-color: #232834; color: #fafafa; }

Thanks for the heads up!
Post reply on HN