Ask HN: My annual plea for dark mode | Hacker News Reader

Ask HN: My annual plea for dark mode

115 pointsomot44 comments

Please HN, please add a dark mode setting tied to my profile.

Did you try "Dark Reader"? It solved these issues for me on Linux/Chrome and iOS. Apart from having a rather smart automatic dark mode you can also do a "black" mode which is great for Oled displays as it replaces tinted or dark gray backgrounds with true black.

https://chrome.google.com/webstore/detail/dark-reader/eimadp...

They have extensions for Firefox, Safari and Edge too @ https:/darkreader.org

Dark Reader is awesome.

It even has different modes of operation - static, filter, and dynamic.

Static and Filter modes are really light on CPU, but tend to break on complex JavaScript-driven sites. Dynamic mode uses a bit of CPU, but works well for most complex sites, including Google Docs, Google Maps, GMail, Google Drive and many others that I have used.

I’ve been using Dark Reader on desktop for a couple of years but had no idea they had an iOS Safari extension. I’ve been using Noir[1] on iOS, which does the trick, although perhaps not as customisable as DR.

[1](https://apps.apple.com/jp/app/noir-dark-mode-for-safari/id15...)

Dark Reader and other extensions aren't necessary. Chrome has built-in functionality (since v78) to turn every website dark and works flawlessly on 99% of sites.

[Chrome Experiments Dark Mode](https://www.howtogeek.com/446198/how-to-force-dark-mode-on-e...)

This is what I use, and it works really well on a simple site like this one.

In Chrome, go to chrome://flags and search for Auto Dark Mode for Web Contents and select "Enabled" (or a similar option, I prefer "Enabled with increased text contrast" sometimes.)

That said, it shouldn't be hard for the site to add a bit of css like:

    @media (prefers-color-scheme: dark) {
    ...

and thus respect the preferences of the users without having to resort to using a specific browser, plugins (whose code may or may not have vulnerabilities), or whatever user hacks we can come up with. (@dang, what do you think?)

That enables (the same sort of) dark mode on _all_ sites, while with Dark Reader you can customize it per site.

I'm not sure "flawless"is the appropriate term. I haven't turned it off yet. But there are some sites that have become difficult to use. And other sites just look odd.

Dark Reader works so well I'd actually forgotten I had it on for HN until I saw this post.

I use Chrome on Desktop and Safari on iOS. Need a magic solution that works for both.

Have been using the Noir app across Apple devices and it‘s amazing.

Please add a dark mode under user settings. We read HN on different devices, with different browsers and under different OSes, having a central/official way to do this would be highly appreciated. There is a user setting for topcolor in our profile, why not another one for bgcolor?

I think this is a solved problem with user styles.

HN design has stayed mostly the same for years, I've been running this userstyle on it [1] for years without issue.

[1] https://github.com/Poorchop/userstyles/tree/master/HackerNew...

User styles are not supported in most mobile browsers, as far as I'm aware.

And there are a number of mobile apps that provide dark mode. Here's a popular one:

https://f-droid.org/en/packages/io.github.hidroh.materialist...

Firefox mobile supports extensions, including Dark Reader or Greasemonkey (which would allow user styles)

It used to, but I don't think it does anymore.

Even safari mobile supports them now (indirectly through an extension)

Here's my UserStyle which also themes https://hckrnews.com/

https://gist.github.com/Zren/ba5f9e4a10e2be5460dbf516287bd61...

Firefox: https://addons.mozilla.org/en-US/firefox/addon/styl-us/

    @-moz-document domain("news.ycombinator.com") {
      * {
        color: #93A1A1 !important;
        background-color: #002b36 !important;
      }
      body > center > table > tbody > tr:first-child * {
        background-color: #073642 !important;
      }
      body > center > table > tbody > tr:first-child * a:hover {
        background: #002b36 !important;
      }
      code, pre, input, textarea {
        background: #073642 !important;
      }
      a {
        color: #2aa198 !important;
      }
      .subtext a {
        color: #93A1A1 !important;
      }
      a:visited, a:visited span {
        color: #b58900 !important;
      }
      a:hover, a:hover span {
        background: #073642 !important;
      }
   }

Source: https://github.com/UserStyles/hacker-news-solarized-dark/blo...

I see others are offering reasonable user style solutions and I raise you my irresponsible, over-the-top solution:

@media (prefers-color-scheme: dark) { html { filter: invert(1) hue-rotate(180deg); } }

For a one-liner that's actually not too bad.

Uncaught SyntaxError: illegal character U+0040

HN has terrifically simply markup, your user agent should be able to display it however you would like with relatively little configuration. What user agent are you using? All the popular ones that I'm familiar with (Firefox, Chrome derivatives) have addons or plugins for changing the appearance of websites. In Firefox you can even add rules to userContent.css without an addon.

Just for an example, here is my userContent.css for highlighting the five languages that I use most frequently in Google Translate.

  @-moz-document domain(translate.google.com) {
      [data-language-code="ar"],[data-language-code="en"],[data-language-code="el"],[data-language-code="iw"],[data-language-code="ru"] {
          background-color:#ddffdd !important;
      }
  }

I just use forced Night Mode offered by browsers like Brave and Bromite on Android and Dark Reader on Firefox.

Very good experience.

All the pages I open are in Night Mode, too, as opposed to Night Mode only on HN.

Please consider sending an email to the admins, hn@ycombinator.com

Here's my stylesheet for HN which gives you this https://i.imgur.com/GePXPMC.png

  body, #hnmain {
    background-color: #1f1f1f !important;

}

  .storylink, .commtext, .titlelink {
    color: #d18741 !important;
    font-size: 13pt;

}

  .storylink:hover {
    text-decoration: underline;

}

  #hnmain > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) {
    background-color: #363636;
    border-radius: 3px;
    padding: 3px;

}

  .spacer {
    height: 30px !important;

}

  textarea {
    background-color: #363636 !important;
    border: 0;
    border-radius: 3px;

}

  .togg {
    font-size: 10pt;
    color: white !important;
    font-weight: bold;

}

  .subtext > span, .subtext > a, .subtext, .subtext > span > a, .sitebit, .sitebit > a {
    color: #4d4d4d !important;

}

  .subtext > a:nth-child(7) {
    color: white !important;
    font-size: 11pt;
}

On windows 10 I turned on the invert colors shortcut key (in the 'color filters' setting page) which is ctrl+Win+c, for a quick fix for anything blowing out the my eyes. That it's instantaneously, one-handedly on or off makes the short term inversion of the tab bar etc feel ok. Most fonts surprisingly look just as good flipped but... the hn one is not a good example

I wish this had the option of inverting the luminosity / value without affecting the hue.

i use a bookmarklet for darkmode

  javascript:document.querySelectorAll('*').forEach(e=%3Ee.setAttribute('style','background-color:%23222;background-image:none;color:%23'+(/%5EA%7CBU/.test(e.tagName)?'36c;text-decoration:underline;':'eee;')+e.getAttribute('style')))

It used to be possible to invert OSX colors with a keyboard shortcut like cmd-ctrl-8 but it's not on by default anymore (still possible to enable it from the keyboard shortcut settings).

Similarly triple click home button on iOS.

while you waiting what did you use currently? have you tried darkreader?

A little off-topic but I recently removed Dark Reader from my Firefox provisioning as it always opened custom webpage to "greet" me. Also, some hacky-wacky disables "Remove Extension" menu position for this plugin.

> darkreader

Too slow. Moved to https://github.com/m-khvoinitsky/dark-background-light-text-...

Every major browser supports the prefers-color-scheme media query and has done so for a number of years. It really isn’t acceptable anymore to present a style that disrespects this setting.

There are already many ways to get that: https://news.ycombinator.com/item?id=27329809

iPhone are very common and do not support that kind of extension. Also auto-dark-mode extensions such as Dark Reader look subpar in my opinion.

iOS does support that kind of extension. There's an extremely good app for creating/editing the custom CSS/JS https://github.com/quoid/userscripts and it can even sync with your other iDevices/Macs over iCloud.

EDIT: Maybe Userscripts' UI doesn't have an integrated text-editor when running on iPhone. It definitely does when running on Mac, and possibly on iPad.

Wow, I stand corrected, thanks !

Do you know if it works on all WebViews? I use Firefox on iOS.

iPhone browser extensions can only run in the Safari app, not inside other apps that embed it. I read HN through Feedly (which displays each article inside the app), and there’s no way to do any user customization.

Don't you use in general a `xcalib -a -i` (invert colours) shortcut, or equivalent?

You could accomplish this yourself with a browser add-on.

an alternative, using third party application (Hack on iOS and macOS) is my ninja way

Reply on news.ycombinator.com