Show HN: Hacker News Dark Mode | Hacker News Reader

Show HN: Hacker News Dark Mode

jgthms.com

119 pointsbbx57 comments

I use dark reader for all browsing. I think HN looks pretty good when using the dark mode setting. https://darkreader.org/

For iOS I use Hack https://apps.apple.com/us/app/hack-for-hacker-news-yc/id1464... . The app has an excellent dark mode.

Can confirm: Hack is awesome and super customizable. It has become the only way I view HN on my iPhone.

I use Firefox Night mode on iOS, and it works great!

I've just installed Dark Reader from this post, it is awesome.

I'd never come across Dark Reader before, thank you!

fantastic. thanks! don't know why it took me so long to look for this

I like it, I would use this as my default.

I agree it is slightly too blue for me, I think it should be more red than blue, especially since the purpose is for low-light reading.

With that said - if I toggle Dark Mode off, and then click a link, it just goes back to Dark Mode. Probably should persist.

Edit: Also, I think the Dark Mode checkbox toggle would be better placed on the profile page, with other related preferences.

Great work!

Agree. Low light should reading should avoid blue.

i would also prefer a more neutral grey. i'm curious as to how designers choose greys in their palette. is there something wrong with just using equal amounts of rgb, e.g. #666666 or hsl(0, 0%, 50%)? do these values not show up as "true grey" on some displays?

I think the greyed out type is too greyed out. Needs more contrast. Less than the white type of course, but more than is present atm.

At 1/3 brightness the text is barely readable. I think it looks amazing with full brightness. It should have been designed at a lower brightness, imo.

There are a significant number of low contrast warnings from a cursory glance through an accessibility tool: https://wave.webaim.org/report#/https://jgthms.com/hacker-ne...

I don't think an optional dark-mode should be expected to accommodate all people with visual disabilities. On the contrary, given the diversity of visual impairments and personal preferences people have, I don't think any stylesheet can reasonably be expected to accommodate all people, which is precisely why support for multiple stylesheets is important.

Why should't the default dark mode fulfill basic contrast requirements (in this case WCAG AA is absolutely possible)? It's not difficult to achieve, and the same problem would exist if the website was in "dark mode" by default.

A website that is bright by default isn't accessible to some people with photophobia (which has a myriad of causes). https://en.wikipedia.org/wiki/Photophobia But some people have precisely the opposite sort of issue.

I maintain that no stylesheet can be accessible to everybody. If any accessibility-assessment tool says otherwise, that reflects a failure of that tool to consider some classes of visual impairment.

i agree with you.

i can't tell you how much i struggle on a daily basis with websites who have passed these "standards". i don't even have anything serious. i just can't read small text well.

so my browser zoom is 150% by default which i adjust if it's too big. that all i did!

my setting has broken major sites on a daily basis. that tool that another poster linked is broken on my side! that's the tool that's telling people they are not following standards...

so yea, i fully agree with you!

I'm sorry if this sounds rude - why don't you create one then?

Maybe they don't know how to create it. You don't need to be a good cook (or even know how to cook) to say that a dish is too salty.

Didn't perceive it as rude, but don't understand what my ability has to do with my critique. The contrast in OP's dark mode stylesheet is trivially fixed by making the font lighter.

interesting tool. thanks for sharing. it failed on a few sites that i tested it on though.

Feels a bit too blue. Maybe replacing the background with a darker and grayer color would make it easier to the eyes

The author is also the creator of my favorite CSS library- Bulma[0].

[0] - https://bulma.io/

bulma is amazing. clean and elegant, super easy to set up. i use it for prototypes and later often realize i just don't need anything more.

Still prefer:

  @media (prefers-color-scheme: dark) {
    body {
      background: #333;
      filter: invert(.95) hue-rotate(190deg);
    }
  }

Then let clients choose the strength of the invert and hue.

One of the issues in "vanilla" HN is made worse in this dark version.

HN's site makes use of rather small font sizes for subtext. In the dark version the contrast between background and subtext is low (below 4.2:1). It would be fine were it 18 or 24 px. But it is not.

When a site uses words, legibility is a must.

I usually use Custom JavaScript for websites extension (since I use it for other stuff as well) and add this snippet[1].

It's still a WIP, but I like it very much. Added more contrast to the number of comments as well...

This is how it looks: https://imgur.com/PaNtWfJ

[1]https://gist.github.com/lucis/592a9522663a14120c7c7a39c97268...

If you install https://chrome.google.com/webstore/detail/dark-reader/eimadp... you get dark mode functionality on any site automatically, no need to create a different website for it. It also has color preferences (hue, contrast, brightness, sepia).

or Stylus(https://chrome.google.com/webstore/detail/stylus/clngdbkpkpe...) and Userscripts

I would prefer if websites would make use of the prefers-colour-scheme rather than having to waste memory/CPU/time by using some of these addons.

For something like this, it should be trivial to do.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...

On the other hand, why does every website have to do something when you can do it yourself with an extension if it's something you want.

This is the beauty of the web browser. I don't even get a choice in how things are displayed in native apps.

Not really a big deal, but when viewed in a dark environment I seem to be noticing the triangles more strongly than before. Maybe make them hollow?

Also extremely minor to the point of being negligible, I notice in Firefox on a 1200 pixel monitor the bottom row displayed is 30 and I roughly cut in half while standard (actual) HN row 30 is about 2 pixels above the bottom.

Is there a discussion page demo, but with actual discussion?

Makes this website look like muddy water but I use dark reader[1] for all my web browsing. Ironically the only place it doesn't work is on the firefox addon page.

[1]https://addons.mozilla.org/en-US/firefox/addon/darkreader/

for security reasons extensions cannot run on the mozilla addons site.

btw many years ago i made something similar to darkreader, for some users it may be faster and more reliable but i also highly recommend dark reader too:

https://addons.mozilla.org/en-CA/firefox/addon/night-light-m...

There should be a feature request for hacker news and let the community vote! I would love a dark mode.

I also just posted this for making it easier to consume comments especially on popular posts: https://news.ycombinator.com/item?id=23206330

I've been using the system setting toggle "Invert colors" on mobile (Android 9). https://support.google.com/accessibility/android/answer/6151...

Thanks for putting out a working demo. Maybe if you could whip up a way for folks to tweak the basics, we could have a way to "vote". Hopefully that would prevent any "DarkModeGate" fiasco where only a minority ends up liking it.. /thought

I hardly ever use dark mode because it’s usually done in a way that has too much contrast for me. This demo seems to pick the right balance - a bit like Apple have done with theirs - and I’d actually consider switching to it on mobile HN if it was an option.

I've been using this greasemonkey script for a while to do this- http://userscripts.org/users/509235

Maybe it should also color the top bar for smartphone?

For example, when I load facebook.com on brave, the top bar becomes blue. Not sure if it's a brave feature for a few selected sites, or a browser api used by Facebook.

It's a meta tag in html, theme-color I think it's called

This is great and I hope it's adopted... but on my phone the textarea text has too little contrast to read without strain

i personally like this version by @deleerium: https://news.ycombinator.com/item?id=23199649

nice contrast without being white on black. the accent colors are tasteful, the purple links are obvious without being distracting.

I clicked on the comments for a stock market post, and was directed to the comments section for the dark mode post.

I believe it’s a static copy to just showcase the new dark theme.

The inputs have dark backgrounds and dark font colors. Otherwise it is not that bad. :thumbsup:

Ship it! (tm)

I visited few links in hackernews and it shows as visited in dark mode too. How is it working?

I like it!

Looks like it is missing upvote arrows?

http://hn.premii.com/ I use this one, and it's been pretty great so far! It has Dark mode and other color options too.

I am getting "Unable to load the content" when I click on a thread, are you getting this? There aren't errors in the log.

I get that too. Looking at the comments work though - click the right side of a link.

Looks like it could be nice but using Firefox mobile on Android the layout is completely broken ️

Looks cool. The tab navigation does not work however.

This looks good. Where do I effect the change?

Next: Mobile mode.

The links are rather flimsy on mobile.

Finally they did it.

Yes please

Reply on news.ycombinator.com