Ask HN: My annual plea for dark mode

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

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

    @-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); } }

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

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

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

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