Show HN: DarkHN – Dark Mode Mirror for Hacker News

https://darkhn.herokuapp.com/

by gaberomualdo • 5 years ago

110 67 5 years ago

darkhn.herokuapp.com

crackercrews• 5 years ago

Nice. Could you change the favicon to be a Y on a dark background?

cmclaughlin• 5 years ago

Looks great!

Agentlien• 5 years ago

On PC I'm using a TamperMonkey script to replace the css with a dark mode theme I spent about half an hour putting together. I'm delighted to see that this looks very similar.

user3939382• 5 years ago

I switched to Firefox on iOS because it has a simple toggle to change all sites to dark mode. I can’t imagine going back to Safari without this feature.

bartvk• 5 years ago

Same here. It's definitely not as intelligent as extensions on desktop browser, but it's suitable in a pinch.

hestefisk• 5 years ago

Same here. The rendering is a bit slower at times, but I actually prefer it over Safari now. Apple should really consider this option.

miles2• 5 years ago

Would love to see this available natively here on HN. The last dark mode request thread I recall garnered 780 points: https://news.ycombinator.com/item?id=23197966

sneak• 5 years ago

As cool as new features would be, I sort of love the HN approach to feature creep (or even just feature addition, as distinct from "creep"). It's such a welcome change compared to other websites and apps.

miles2• 5 years ago

I, too, appreciate HN's reluctance to add new features, and have zealously followed the same approach in maintaining my own tiny corner of the web for two decades.

But dark mode offers such immense retinal relief that a few lines of CSS¹ does not seem too unreasonable, especially since it means not having to trust third party extensions to do the job (though Firefox supports site-specific CSS rules natively: https://superuser.com/a/319322/38084 ).

¹ I arrived at these few lines for my simple site:

  @media (prefers-color-scheme: dark) {
  body {background: #222b39;color: #e1dfdc}
  input,textarea {background: #333;color: #e1dfdc;border: 1px solid white}}

though HN likely requires a far more skillful and circumspect approach, e.g., https://news.ycombinator.com/item?id=23199649 .

beermonster3• 5 years ago

It’s also one of the things I value highly.

The other is the better signal/noise ratio.

argvargc2• 5 years ago

I find it offensive there's no dark mode. It's discrimination against people with a vision disability. It's a small and insignificant change on their part, could be made in 5 mins.

LilBytes• 5 years ago

Does dark mode help those with visual disabilities?

I whole heartedly want dark mode HN but your comment seems insincere and hyperbolic.

drusepth• 5 years ago

I know "could be made in 5 mins" is an exaggeration, but there's a very real long-term cost to adding thematic options like dark mode that HN just might not want to take on.

Any time you split your UI (for example, light mode and dark mode), it effectively doubles/multiplies all future UI testing you do from then on out (testing all new views/features on both light and dark mode). It can also add additional strain on bug reports / support, since you no longer know what UI configuration a particular user might've been using when they complained about something.

Slightly less of an issue on a site like HN where the UI is somewhat simple and static and changes happen at alligator speed, but still a long-term commitment to make (as opposed to 5 min of dev time).

(In case it isn't obvious, I'm a little salty about how much time I still spend testing/fixing my own site changes in dark mode over a year after adding it.)

alias_neo• 5 years ago

Interestingly, DarkHN breaks your link. I couldn't view it, just got a 403, had to come back to normal HN to make sure the link itself wasn't broken.

fragileone• 5 years ago

I'd like it natively since my RSS reader has an internal web browser that doesn't support browser extensions which I would otherwise use here.

drdavid• 5 years ago

I just use Stylish or Stylus and apply a darker userstyle.

plibither83• 5 years ago

Shameless self-plug: I built Refined Hacker News[0], a browser extension, that allows one to set custom CSS and has a default preset for dark-mode :).

[0] https://github.com/plibither8/refined-hacker-news

FlashBlaze• 5 years ago

Easily one of the best add-ons I've installed. Thanks.

Krasnol3• 5 years ago

From all those addons and mods I've seen for this page, this is really the best one. Thank you.

I have one minor issue though: the top bar (with new threads past etc.) is white with the text almost white too. Makes it unreadable. I'm not sure if this is somehow my fault or if it comes from the addon: https://i.imgur.com/DPEn3b6.jpeg

I have dark mode on.

plibither83• 5 years ago

Thanks Krasnol :)

This is an interesting issue. What color is your "topbar" configured to? You can check it under your profile settings: https://news.ycombinator.com/user?id=Krasnol. It could be that the topcolor that you've set is a dark color, and the CSS inversion makes it light, thus conflicting with the text color.

If this is still a problem, please do open an issue on the GitHub repository, I'll happily look into it :)

aye01• 5 years ago

an alternative i recommend is the Dark Reader extension that makes all my websites dark mode in general.

vesche• 5 years ago

I use Stylus and this stylesheet: https://userstyles.org/styles/22794/a-dark-hacker-news

Works great for me. I use dark themes via Stylus for most of the common websites I visit like HN, GitHub, StackOverflow, etc. All other websites that cause me to squint I just toggle Dark Reader: https://darkreader.org/

adrusi3• 5 years ago

Dark reader works unreasonably well.it has done more than any other project to restore some degree of visual consistency to our computer screens in the age of web apps.

Accacin• 5 years ago

I tried it a while back in Firefox and after a a few days I noticed memory usage in Firefox was going way up and whenever I opened dev tools everthing would slow down drastically. Removed the addon and everything went back to normal.

Anyone getting these types of issues still? I would love to start using it again.

erikbye• 5 years ago

Dark Reader is great if you do not care about performance.

allenleein• 5 years ago

Same here. I have been using Dracula theme for HN for over a year. Absolutely love it.

https://github.com/ale0sx/hackernews-dracula

terramex• 5 years ago

Here is mine: https://gist.github.com/jay-m-z/29c145ccd21f2b70f3cafd56c6cf...

Looks like this: https://imgur.com/a/d7PSU96

Based upon: https://userstyles.org/styles/166661/orb-s-dark-hacker-news-... with bunch of my own adjustments and improvements

factsaresacred• 5 years ago

Really nice, thank you

helloguillecl• 5 years ago

Cool browser!

beermonster3• 5 years ago

Is that like GreaseMonkey ?

Jorengarenar• 5 years ago

Yes, essentially yes. UserScripts used by GreaseMonkey are JavaScript. UserStyles in Stylus work analogously for CSS.

ZuLuuuuuu• 5 years ago

On my desktop Chrome, I use "HN Enhance" extension. It works pretty good.

Reading the comments here, a lot of people use various extensions to achieve dark mode, so maybe it is time that HN implements this natively.

k4ch0w• 5 years ago

Great coloring I really like it :-D

DavideNL• 5 years ago

Try to read HN in Firefox on iOS, on an iPad 12’9. It’s impossible to read due to the tiny text size. You can’t zoom text in Firefox-iOS either… combined with no dark mode it’s a terrible user experience.

brundolf2• 5 years ago

iOS Safari lets you zoom on HN, and also let's you turn off "request desktop sites" in settings which might help the small text

messutied• 5 years ago

Is there any browser on iPhone that allows custom CSS/JS? Last time I checked I couldn’t find a way, all I wanted was to set a dark then to HN, without having to visit another website.

philbo• 5 years ago

Will you be implementing `/classic`?

aussieguy1234• 5 years ago

If you like this you can also try Dark Reader, available as an extension for Chrome and Firefox. It'll make every website render in dark mode.

guidopallemans• 5 years ago

I used to have this extension, until I noticed the tiniest changes to pages even when the extension was "disabled". Ironically, I distinctly remember looking for the dark/light mode switch on hackmd.io and couldn't find it. Only when I uninstalled the extension did the whole page become usable again.

Generally I like the extension though, I still use it on my phone.

totetsu• 5 years ago

Part of me was hopping this would be a Black Mirror mode for Hacker News.

markjgx• 5 years ago

hckrnews.com + DarkReader. DarkReader is such a good extension, couldn't live without it!

Retr0spectrum• 5 years ago

While it's certainly aesthetically pleasing, personally I find the link text too low-contrast. I think it should be slightly brighter.

I normally prefer and use dark-mode UIs, but this one is actually slightly harder for me to read.

ericlewis• 5 years ago

Super cool! I did this same thing use cloudflare to change the CSS on the fly.

0xfaded• 5 years ago

Missed opportunity for "darkernews"

throwaway45209• 5 years ago

This looks really good.

1MachineElf• 5 years ago

I hope HN's default look will never change.

anishjain2000• 5 years ago

Are you using HN api

EMM_386• 5 years ago

I use "Hacker News Readable Dark" along with Stylish.

It works great.

https://i.imgur.com/OUmTmP8.jpg

wishinghand• 5 years ago

Perhaps also make the font size a bit more readable? 10pt is pretty unfriendly to even 20/20 vision.

partomniscient• 5 years ago

I prefer dark modes generally and don't mind the look of this one. But it amused me that one of the posts currently on the front page:

Drunk Post: Things I've learned as a Sr Engineer [1]

Mentions this:

Dark mode is great until you're forced to use light mode (webpage or an unsupported app). That's why I use light mode.

and self-illustrates this beautifully (unless you have dark-mode on reddit already).

...although its also why you need a Dark mode for HN if you're coming from Reddit. I guess I get the Sr Engineers point.

[1] https://old.reddit.com/r/ExperiencedDevs/comments/nmodyl/dru...

brundolf2• 5 years ago

In my day to day life, HN is the main place where I'm jarringly "forced to use light mode". It's blinding when I tab over while playing a PC game in the evenings

xtrp• 5 years ago

Thank you all for the feedback and support for DarkHN. I'll be working on fixing some of the bugs on the application (unexpected 403 errors, low contrast, etc).

If you're interested in the code or would like to contribute, take a look at the GitHub repo: https://github.com/xtrp/darkhn

For those interested, it's written in Node.js with a simple Express.js server. More info is available on the repo.

Thank you all again for taking a look at this project!

— Gabriel

Show HN: DarkHN – Dark Mode Mirror for Hacker News

Related Stories