HACKER Q&A
📣 omot

My annual plea for dark mode


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


  👤 halotrope Accepted Answer ✓
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...


👤 NKosmatos
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?

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


👤 phoe-krk

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

👤 ghoulishly
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); } }


👤 dotancohen
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;
      }
  }

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


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

👤 user3939382
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;
}

👤 carrolldunham
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

👤 andrekandre
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')))

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

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

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

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

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

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

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