Hacker News needs a Dark Mode | Hacker News Reader

Hacker News needs a Dark Mode

126 pointsjaylittle88 comments

Hackers like dark modes. Hacker News therefore should provide its users with a dark mode option. Maybe even automatically select it based on their browser preferences.

Note: Telling me to load up some browser extension to handle it is a bit silly as it requires me to implicitly trust the author of said extension which will see and have access to virtually everything on every website I enable it for.

All thoughts and criticisms of this statement are welcomed.

Viva la Dark Mode!

View on HN

I know you mentioned you don't like extensions, but for those that don't mind Dark Reader is really useful:

https://darkreader.org/

I have it setup to enable according to the system. Also, I use the whitelist mode, so I enable on specific websites instead of having it enabled for every one automatically.

It's available on mobile via Firefox for Android!

for anyone trying this for a first time, after installing, click the icon, click more, and there are 4 ways to darkmode a site. filter, filter+, static, dynamic. youll find different ones work better for different sites. then go back to the filter tab and modify brightness and contrast. sometimes the filtermode that is not immediately the best looking "works" the best once fixing the contrast.

i prefer hc.yc and hckrnews.com in static.

Good tips!

Thank you for your suggestion! I am currently using it now & it's fantastic!

Darkreader seems to always induce a noticeable performance hit on each computer I've ran it on for some reason when I run it with the default settings. I may try your whitelist method instead and give it another chance...

If you're using ublock origin, I have these filters which I copied from another HN comment once upon a time.

news.ycombinator.com##html:style(filter:invert(100%) hue-rotate(180deg))

news.ycombinator.com##body:style(background: white)

news.ycombinator.com##div.toptext:style(color: black)

news.ycombinator.com###hnmain td[bgcolor="#000000"]

edit: "rules" -> "filters"

I’m an embedded dev, so websites and web tech are a black box to me… I’ve never asked, does the ## mean “overwrite” as uBlock DSL?

> I’m an embedded dev, so websites and web tech are a black box to me

You should start tinkering with embedded webservers then (civetweb, etc)! Even embedded devs should learn web tech because often browsers are the easiest way to interface with router/modem settings, IoT settings, etc.

In this case "##" is uBlock filter syntax. Basically "news.ycombinator.com##html:style(filter:invert(100%) hue-rotate(180deg))" means "if the host matches news.ycombinator.com inject the following CSS"

Here's the docs if you want to rtfm: https://github.com/gorhill/uBlock/wiki/Dashboard:-My-filters

In this case I believe we are dealing with "cosmetic filters": https://github.com/gorhill/uBlock/wiki/Procedural-cosmetic-f...

TIL that ublock lets you inject CSS. I've been using tampermonkey for that (most recently to fix the mspace tags on ncatlab.org).

> means "if the host matches news.ycombinator.com inject the following CSS"

Well I wouldn't word it like that.

    youtube.com##.ytp-cards-teaser

Hides elements with the selector ".ytp-cards-teaser", so ## doesn't represent "inject the followong CSS".

This is a helpful link: https://github.com/gorhill/uBlock/wiki/Introduction-to-basic...

## represents a cosmetic filter. Though I can't seem to figure out what #$# is still but I know that's also possible to use

Note: These actually go under the filters tab of uBlock Origin, not the rules tab.

i didn't know ublock can be used as a poor man's violent monkey :)

i can't read dark mode as well as light mode, but thanks for the advice!

That rule set is pretty harsh. Can I recommend:

  news.ycombinator.com##body:style(background: black)
  news.ycombinator.com##td:style(color: #fafafa !important)
  news.ycombinator.com##table:style(background-color: #120F0D)
  news.ycombinator.com##div.toptext:style(color: #fafafa)
  news.ycombinator.com##span.c00:style(color: #fafafa !important)
  news.ycombinator.com##a:style(color: #ffa000 !important)
  news.ycombinator.com##span#karma:style(color: #faa000 !important)
  news.ycombinator.com##span.pagetop:style(color: #fafafa !important)
  news.ycombinator.com##textarea:style(color: #fafafa !important; background: inherit; )
  news.ycombinator.com###hnmain:style(background: #120F0D !important)

Oh wow, thank you for sharing; this is lovely!

Here's a dark mode stylesheet for Hacker News that I've been maintaining for a while as well: https://userstyles.world/style/1898/hacker-news-dynamic-dark

Just need the Stylus extension for your browser.

I've gone through every different feature on HN to tweak the colors, including details like down voted comment colors and obscure things like the special colors at Christmas.

https://news.ycombinator.com/item?id=23197966

And probably a dozens more with 100+ comments and hundreds more with a few comments.

At this point I have simply given up.

Same. It's been 3 years since they said they would do something and it only needs a couple of lines to the CSS.

eh to be fair it's a bit more than a couple of lines, but I agree, with a site like HN it shouldn't be too bad.

I could knock it out in a single day. The people running this site are simply dedicated to the Craiglist style of thought, which is antagonistic to change for "culture" reasons whilst purporting to be for "practical" reasons.

It's interesting - in the linked thread, someone (who seems to be affiliated with hn) said that they're willing to do it but they don't have the CSS expertise. I know I'd be willing to devote some time to it and I'm sure lots of other people would as well.

That's actually very helpful, thank you for that.

I'm going to work on implementing the CSS changes when I get bored. If that's the only thing standing between a bunch of hackers and dark mode on the hacker news website, I'm going to be very disappointed ;)

Okay I'm a glutton for punishment so I added support to news.css and created a patch for it.

https://news.ycombinator.com/item?id=36344178

Never understood the point of dark modes. Am I too old?

A computer LCD is effectively a flashlight shining in your face. If you read in bed every night, it's jarring and annoying.

"No screens in the bedroom" is a quick and dirty way to improve insomnia.

It's easier to your eyes at night or cloudy days.

I have my devices setup to switch automatically by hour of day. Sometimes I switch manually when I want to.

I like to read HN in the evening to unwind.

A bright white website after dark is a great way to disrupt your melatonin production and affect your ability to fall to sleep.

Dimming your phone brightness does not help sufficiently at all. In a dark room it's still like a relative flashlight in your eyes.

This should not be such a head scratcher to understand.

> A bright white website after dark is a great way to disrupt your melatonin production and affect your ability to fall to sleep.

I don't think that's true: https://time.com/5752454/blue-light-sleep/

This is a pet peeve of mine precisely because of the first line in that article:

> It’s become a virtually unchallenged piece of conventional wisdom that exposure to blue light—the type emitted by electronic device screens—is bad for sleep.

I read somewhere that blue light theory is a corporate bullshit financed by glasses makers to add 50$ by glass the sell you for a production cost of ) 50 cents.

A little like the 2000kcal by day by the agri-business lobby or the 1,5l of water by the water and soda business lobby.

Weird to exclude the ultimate form of corporate bullshit: vaccine makers (ie: corporations) are federally protected from any and all civil action against them. And they're one of the few drugs that are effectively mandatory for approximately 76 million children. Every single year. A literal money making machine. Protected by law. For the benefit of corporations.

https://www.law.cornell.edu/uscode/text/42/300aa-22#:~:text=....

Excuse me? For the benefit of corporations?

Polio used to be a thing in the western world, measles is coming back.

Mandatory childhood vaccines are for the benefit of children and society.

You’re also misrepresenting the NCVIA, the net result is arbitration that is easier to get a payout from as causality does not need to be proven.

https://en.m.wikipedia.org/wiki/National_Childhood_Vaccine_I...

The person you replied to said nothing about blue light but bright light.

Are you claiming bright light does not affect sleep?

Maybe not old enough? ;-)

I use to prefer light mode exclusively, but my eyes feel more comfortable with dark mode as I get older.

I'm a graybeard, but I find dark modes to be much more difficult to read than light ones. I've never really understood the appeal of dark modes (outside of just aesthetics), but I do understand that they have an appeal to some.

Fair enough. For sure it's subjective factors (personal taste, etc) + objective ones (surrounding lighting, time of day, how long you've already been looking at a screen, and so on ...).

Same. I am probably too old too, but it really doesn’t help me with anything…

No. The primary benefit of "dark mode" is that it reduces eye strain for folks using their monitor at a brightness set too high for their environment. It can also just look cool, which is fine too.

Dark mode myths are summarized here: https://www.wired.co.uk/article/dark-mode-chrome-android-ios...

>using their monitor at a brightness set too high for their environment

That's rather dismissive and ablest. I need high contrast. Dark background and bright text allow me to view the content. Screen brightness plays a role here too, but it's used to enhance the contrast, not compete against it.

> I need high contrast.

Me too! That's an independent issue, though.

Normal HN text has a contrast ratio of 19.34:1, which is great.

In contrast (ha ha), greyed-out text has a contrast ratio of 3.54:1, which is terrible.

So, HN should definitely fix text/background contrast ratios ASAP, whether or not they add a dark mode.

>So, HN should definitely fix text/background contrast ratios ASAP, whether or not they add a dark mode.

Agreed!

white backgrounds can be very hard to use or distracting to people with floaters in their eyes. dark mode makes concentration possible.

I could go either way, but switching back and forth is hard on me, so I tend to go light because the web is light. (Also because a lot of dark mode stuff tends to be crazy low contrast.)

I do however use dark mode when reading in bed and wish there was a pdf reader that did it.

Or... you could just switch lights on in your room and brightness of your monitor compared to the rest of your environment won't be that dramatical.

No, I never understood the point either. But then I learned to code on a ZX Spectrum where everything was light mode so maybe that’s it.

No, maybe it's your eyes that are okay with non-darkmode. I am not using darkmode by reducing by using nightmode all the time but darkmode is totally a fine way to spend time in front of the computer if that makes you comfortable.

I understand the appeal of dark mode - to reduce eye strain, especially in dim environment. I suggest to not read your screen at all in the bedroom. It is the best down time for one's mind. Maybe I have undiagnosed eye problem. If the dark mode has a strong contrast with text, I see shadow/aura for minutes. It doesn't happen if the contrast is reduced nor in non-dark mode. I wonder if anyone has similar problem?

I have the same, and agreed on the advice of not using screens when you're trying to unwind.

I think it's largely a matter of taste, although there are people for whom bright interfaces cause accessibility issues.

Personally, I can't stand light-on-dark interfaces and turn them off wherever I can, although that may be because I have an astigmatism and dark interfaces supposedly cause problems (although I'm not convinced that's the reason in my case).

the older i was getting the more i noticed that i can read light mode better than dark mode.

one day, when i was about 42 years old, sitting on a ferry on a very sunny day, i could hardly see my MacBook screen. switched to light mode and while the image was still a bit faint, it became totally readable.

I'm not using anything in dark mode ever since.

It's a way to forgo real customizability by limiting user choice to two colors.

You are too old to fall for bullshit.

The argument is that dark mode is needed to tackle the problem of blue light messing with your melatonin. However, this has not only never been proven, there are studies to the contrary:

https://time.com/5752454/blue-light-sleep/

Moreover, dark mode hurts my eyes and does the opposite of the other purported benefit.

Screens induce anxiety after long periods of usage, and it has nothing to do with the colour of the light. If you're reading your phone in bed before sleep, you have bigger problems.

I'm seeing a lot of visual snow with bright backgrounds, which is very annoying. Makes it close to impossible to focus.

When you get older, and cataracts are a thing... white backgrounds blur and essentially "fill in" dark text, drastically lowering the perceived contrast ratio, and this makes it very hard to read.

The inverse is much easier to read for me.

Thank you all for your enthusiastic responses!

I was sorry to learn that this feature request hasn't seen much traction. However @ksec gave me an idea by linking me to an earlier thread on this very same topic in which somebody suggested that we just create a patch for the existing news.css file.

Not sure why this thread got flagged, but I took it upon myself to create a patch for the existing news.css file as well as producing a new news.css file with dark mode support:

Patch: https://pastebin.com/Gwq5WSwX

Full File Pre-Patched: https://pastebin.com/Nd7JDLLT

Again, all thoughts and criticisms of this work will be welcomed.

Please help those of us with a dark mode preference enjoy this website more by implementing these changes (after a proper code review of course, as I would expect nothing less from fellow hackers)

Note: extensions don't help for those of us on mobile browsers that don't support extensions.

And dark mode is most important/applicable when browsing on your phone before bed.

Ideally HN would just follow the user's dark mode OS-wide setting.

I came here to mention this. I access HN via my rss feed on my iPhone and it's always a bit jarring contrasting with the rest of my themes.

I use the Chrome and Brave browsers on Android. Both support dark mode just fine. And it's automatic for every website, the site itself doesn't need to support it.

Are you on iOS?

> Note: Telling me to load up some browser extension to handle it is a bit silly as it requires me to implicitly trust the author of said extension which will see and have access to virtually everything on every website I enable it for

If the extension asks for permissions to all websites instead of just this one, then yes.

Also, "hackers" fix things like this themselves.

Also also, I may be reacting strongly to this because I don't like dark mode, or the assumption that I should because I'm a "hacker".

A proper CSS implementation of this would respect your browser preferences, so everybody could have it work as they'd like ;)

I apologize for the implication, it was not on purpose.

> Hackers like dark modes.

Certainly not all hackers like dark modes. But I doubt anyone would object to such a thing existing as an option.

Dark Reader has a sepia-mode as well as night-mode. I remember reading some pg essay about how he patched a customer's issue with lisp while the customer was still on the phone... but still no night-mode after 10 years of begging, oh well, first world problems I guess.

"Hackers like dark modes"

Not all programmers like dark mode. Some people with astigmatism have problems with dark mode.

Dark Mode Isn’t ‘Easier on the Eyes’ for Everybody (2019) https://www.vice.com/en/article/ywyqxw/apple-dark-mode-eye-s...

Extract:

> As Gizmodo wrote in 2014, citing research by the Sensory Perception and Interaction Research Group, at University of British Columbia, white backgrounds act as a "crutch" for astigmatic eyes: "People with astigmatism (approximately 50% of the population) find it harder to read white text on black than black text on white."

Related: Does anyone know why Hacker News is so... rudimentary? It doesn't have pagination and lacks accessibility features.

I understand why it's kept simple but for a tech related forum it's suprisingly clunky.

I use this:

Stylus https://chrome.google.com/webstore/detail/stylus/clngdbkpkpe...

Hacker News Dark Theme https://uso.kkx.one/style/191917

Is this one dark enough for you ? [0]

I call it `links https://news.ycombinator.com/item?id=36342085`

Oh and don't tell me you're a hacker if you've never tried Hacker News in the terminal emulator. Dark, Perfectly dark, Green-dark \o/

[0] https://ibb.co/QHLWHZm

If you welcome criticism, then here it is: I find your generalization particularly silly ("Hackers like dark modes"). You could have just asked (begged) for a dark mode without invoking a fallacious argument.

Why not just use https://www.darkhn.com/

Works for me.

I made this 3 years ago: https://jgthms.com/hacker-news-dark-mode/

I submitted it to HN: https://news.ycombinator.com/item?id=23203347

This is a reason third-party apps are useful. I use a random app I got off f-droid and it has a dark mode.

You can tweak it with plugins or extensions, you're a hacker, aren't you?

Also, the dark mode is extremely hard to read for some people (specially older people).

It causes you pupil to dilate (less light on the eyes) and shifts the focus point on the retina slightly.

Don't get me started on transparencies...

My favorite HN dark theme doesn't seem to be available any longer in its original form, but luckily I was able to save it.

https://github.com/duiker101/hackernews-dark-amethyst

Funny that I've been on this site for years yet I don't actually know if it's open source. Does anyone know whether it is and if it's open to pull requests? This sounds like it would be a fun project I could knock out in a weekend or so.

If you want, I have a dark-ish theme for HN that I've made with Stylus, it mimicks the Synthwave84 theme for VSCode

https://github.com/oxodao/synthwave-themed-sites

If you’re using the Arc browser, try out this Boost: https://arc.net/boost/E4A26AD9-F0FF-4247-AEAE-27D071FB546B

what many of those hackers don't realize, it's that their dark mode theme is very hard to read at low brightness levels, so when they switch to some light windows, it pokes their eyes out obviously.

instead of forcing everything to be configured for dark theme, it would be a lot simpler to just drastically lower the brightness at night and keep using light themes.

one trick is to lower the brightness slightly dimmer than comfortable and let your pupils take 2-3 seconds to adapt.

another trick, on iOS/macOS, if you combine this with true tone and night shift, then your eyes will be strained even less!

I understand not trusting random developer, which means your only option is to create your own extension. Shouldn't be that hard, considering the scope of what's needed.

Provided you're a web developer, of course.

Just use a userstyle?

http://hn.premii.com supports lots of options in addition to dark mode

It is trivial to do. Just write the extension yourself. Won't take more than 15 minutes with ChatGPT.

I made a Stylus theme for https://news.ycombinator.com and https://hckrnews.com

https://i.imgur.com/b08pZev.png

* https://addons.mozilla.org/en-US/firefox/addon/styl-us/ Stylus Button > Manage > Write New Style > Import

* https://gist.github.com/Zren/d025e06754bb2e0a7de0036fb2eee3f...

I personally disable all extensions except uBlockOrigin from auto-updating. If they break, then that prompts me to re-check if they're legit or if they've been bought out (like Stylish) before updating.

If you don’t mind using an alternative front-end, I’ve built an open source one[0] that supports dark mode and some other things I was missing when using HN on larger screens

0. https://modernorange.io

Here's my custom dark mode CSS if anyone enjoys the google dark mode aesthetic (I inject with the "Stylus" extension, avoid "Stylish" extension at all costs): https://pastebin.com/CsVkRbYM

Also my CSS for hckrnews.com (my preferred homepage UI): https://pastebin.com/SLRrY9gn

Looks like this: HN - https://i.imgur.com/P6rDgR8.png hckrnews.com - https://i.imgur.com/HfjOAYW.png

Poor man's dark mode: invert colours on your phone.

Brave has the built-in dark mode

Anything that requires adding even a single line of JS to HN is gonna be a hard no from me.

it can be done in pure CSS these days: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...

Plus one for dark mode.

Reply on news.ycombinator.com