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

431–440 of 469 posts

Re: Ask HN: Dark mode for HN please?

#431

Post by codingdave »

austincheney wrote: post #424
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…

Challenge accepted: https://github.com/prettydiff/hn_dark The CSS works well for me, but I understand presentation is highly subjective and some people may not like it. Perhaps more important is that tiny bit of JavaScript in the readme.md so that anybody can rapidly experiment with CSS themes for Hacker News on live pages with just copy and paste. This was my first time to do a deep dive into the front-end code of H…

You don't need JavaScript to experiment with CSS. Just open DevTools and experiment away.

Re: Ask HN: Dark mode for HN please?

#432

Post by runxel »

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…

Very nice! I will use it for the time being via Stylus.

Re: Ask HN: Dark mode for HN please?

#433

Post by albedoa »

JoshTriplett wrote: post #429
albedoa wrote: post #245

Earlier quoted context omitted.

> grey-on-color is lower contrast than white-on-color. > Let's not make HN one of those sites. The OP of the thread you are replying to is #828282 on top of #f6f6ef. That is lower contrast than black on white.

I was responding to the comment I directly replied to, not commenting on the specific color scheme of the style.

You said: "Let's not make HN one of those sites."

Either it is already one of those sites or there is room between the most extreme contrasts. Pick one.

Re: Ask HN: Dark mode for HN please?

#434

Post by gradys »

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'm late to this party, but this is fantastic. I've popped it into the Firefox Stylus addon. Consider me a happy user. Thanks so much!

Re: Ask HN: Dark mode for HN please?

#435

Post by JoshTriplett »

albedoa wrote: post #433
JoshTriplett wrote: post #429

Earlier quoted context omitted.

I was responding to the comment I directly replied to, not commenting on the specific color scheme of the style.

You said: "Let's not make HN one of those sites." Either it is already one of those sites or there is room between the most extreme contrasts. Pick one.

HN is currently "black on very light background". The equivalent dark mode would be "white on very dark background". I hope we end up with either that, or even better, white on a black background (because that would be great for devices with OLED screens, including many phones).

Re: Ask HN: Dark mode for HN please?

#436

Post by monokai_nl »

lucb1e wrote: post #342
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…

I love the top bar, this is fantastic. Saw the domain, then your username, then the bio: "Author of the original Monokai color scheme". I didn't know there was a person behind it, I thought it was just a name! Sounds like you should definitely be on the Hacker News Color Advisory Committee to make this work well for everyone given your experience in designing dark modes.

Yeah, Monokai started as a color scheme for Textmate which I just made for myself somewhere in 2006. I named it after my company name and put it on the Textmate wiki. It took off after that.

I'll gladly accept a humble place in the HN Color Advisory Committee :)

Re: Ask HN: Dark mode for HN please?

#437

Post by monokai_nl »

haack wrote: post #355
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/

Contrast ratios that are mathematically derived are not always nice or correct. It's notoriously hard to determine perceived brightness from hex codes. That said, it might need some tweaking. I only spent a little time on it and I know it helps to revisit a color scheme a couple of times during different light circumstances.

Re: Ask HN: Dark mode for HN please?

#438

Post by monokai_nl »

bborud wrote: post #399
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…

The tracking is too tight for light-on-dark. You focused on colors and forgot about the content. You can't just invert colors and think that the typography automatically works. It often doesn't.

I didn't touch the typography indeed, but I also didn't just invert the colors. What would you suggest to do with the typography to make it better?

Re: Ask HN: Dark mode for HN please?

#439

Post by monokai_nl »

mmmBacon wrote: post #425
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…

A question, how would the black bar appear in dark mode? It should be set out somehow. Also would be useful if when the black bar appears there’s a link to the person honored.

Which black bar do you mean exactly? I decided to let go of the full orange bar and give the text an orange color instead. I think it looks more balanced.

Re: Ask HN: Dark mode for HN please?

#440

Post by albedoa »

JoshTriplett wrote: post #435
albedoa wrote: post #433

Earlier quoted context omitted.

You said: "Let's not make HN one of those sites." Either it is already one of those sites or there is room between the most extreme contrasts. Pick one.

HN is currently "black on very light background". The equivalent dark mode would be "white on very dark background". I hope we end up with either that, or even better, white on a black background (because that would be great for devices with OLED screens, including many phones).

The top post is #828282 on top of #f6f6ef, a pretty low contrast of 3.541 compared to 21.000 for black on white.
Post reply on HN