HN Explorer

57 comments

[ 4.5 ms ] story [ 112 ms ] thread
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/

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

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

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.
Narretz
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.
blondin
interesting tool. thanks for sharing. it failed on a few sites that i tested it on though.
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
CraftThatBlock
Feels a bit too blue. Maybe replacing the background with a darker and grayer color would make it easier to the eyes
katsura
The inputs have dark backgrounds and dark font colors. Otherwise it is not that bad. :thumbsup:
kndjckt
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.

michaelmcdonald
Can confirm: Hack is awesome and super customizable. It has become the only way I view HN on my iPhone.
e_carra
I use Firefox Night mode on iOS, and it works great!
garydevenay
I've just installed Dark Reader from this post, it is awesome.
drcongo
I'd never come across Dark Reader before, thank you!
evanmaynard1
fantastic. thanks! don't know why it took me so long to look for this
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?
deleerium
I like it!

Looks like it is missing upvote arrows?

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?

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.
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.
k__
Next: Mobile mode.

The links are rather flimsy on mobile.

zicon35
Looks cool. The tab navigation does not work however.
nightraven97
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.
daledavies
Looks like it could be nice but using Firefox mobile on Android the layout is completely broken ️
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
imvetri
I visited few links in hackernews and it shows as visited in dark mode too. How is it working?
alpb
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).
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...

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.

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.
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.
wishinghand
The author is also the creator of my favorite CSS library- Bulma[0].

[0] - 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.