Comment by monokai_nl | Hacker News Reader

Comment by monokai_nl | Hacker News Reader

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-nonsense. All colors are pure grayscale.

- Simple. Only minimally adjusted the CSS ( https://monokai.nl/lab/hacker-news/news.css ). This can be easily implemented in the current CSS using some media queries. I only added one thing in the HTML which is a span around the karma points at the top.

- Keep the orange. This was a puzzle. I think the original bar is too jarring on a dark background. But, HN is not HN without a touch of orange. I decided to style the top links only. This keeps the soul of HN.

- Readability. You should be comfortable reading this dark mode in low light. Too much contrast doesn't read nicely, but the original HN text has a lot of contrast with its #000 on an off-white background. My dark background is off-black and the text is turned down a notch from pure white. If you need less contrast, you can turn down the brightness of your display.

- The upvote triangles are unicode now inserted via CSS. Saves a request and doesn't render pixelated on Retina.

- Best thing. All comments are placed on a big slab of #2a2a2a. That's triple the answer to you know what.

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.

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 :)

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?

Light letters on dark background need more light to maintain legibility. So you might have to increase the point size and adjust the weight and increase leading and tracking. The counters are important for legibility so pay attention to how the font is affected by inversion.

That’s the best one I’ve seen so far. Especially how you dealt with the top bar.

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

> Alligator energy

This is a great metaphor.

This is definitely my favorite and retains the unique HN look.

I love it! Looks natively enough.

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.

The black bar that they put up when someone important to the community passes.

Reply on news.ycombinator.com