
Show HN: Hacker News Dark Mode - bbx
https://jgthms.com/hacker-news-dark-mode/
======
kndjckt
I use dark reader for all browsing. I think HN looks pretty good when using
the dark mode setting. [https://darkreader.org/](https://darkreader.org/)

For iOS I use Hack [https://apps.apple.com/us/app/hack-for-hacker-news-
yc/id1464...](https://apps.apple.com/us/app/hack-for-hacker-news-
yc/id1464477788?ls=1) . The app has an excellent dark mode.

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

------
Wowfunhappy
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.

~~~
http-teapot
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.

------
asidiali
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!

~~~
dpau
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?

------
cnorthwood
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...](https://wave.webaim.org/report#/https://jgthms.com/hacker-news-dark-
mode/)

~~~
catalogia
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.

~~~
Narretz
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.

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

~~~
ibrarmalik
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.

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

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

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

~~~
dpau
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.

------
meristem
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.

------
lucis
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](https://imgur.com/PaNtWfJ)

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

------
gdavid
I've been using the system setting toggle "Invert colors" on mobile (Android
9).
[https://support.google.com/accessibility/android/answer/6151...](https://support.google.com/accessibility/android/answer/6151800?hl=en)

------
alpb
If you install [https://chrome.google.com/webstore/detail/dark-
reader/eimadp...](https://chrome.google.com/webstore/detail/dark-
reader/eimadpbcbfnmbkopoojfekhnkhdbieeh) 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).

~~~
kd913
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...](https://developer.mozilla.org/en-
US/docs/Web/CSS/@media/prefers-color-scheme)

~~~
hombre_fatal
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.

------
generalpass
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?

------
chacha2
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/](https://addons.mozilla.org/en-
US/firefox/addon/darkreader/)

~~~
modzu
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...](https://addons.mozilla.org/en-CA/firefox/addon/night-light-mode/)

------
truetaurus
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](https://news.ycombinator.com/item?id=23206330)

------
zengid
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

------
tokamak-teapot
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.

------
thezilch
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.

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

------
elcomet
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.

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

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

------
clairity
i personally like this version by @deleerium:
[https://news.ycombinator.com/item?id=23199649](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.

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

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

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

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

------
thrill
Ship it! (tm)

------
deleerium
I like it!

Looks like it is missing upvote arrows?

------
nightraven97
[http://hn.premii.com/](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.

~~~
http-teapot
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.

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

------
zicon35
Looks cool. The tab navigation does not work however.

------
giovanni_m1
This looks good. Where do I effect the change?

------
k__
Next: Mobile mode.

The links are rather flimsy on mobile.

------
lihaciudaniel
Finally they did it.

------
dirtnugget
Yes please

