Ask HN: Can we get a HN background color (dark mode)

firefox dark reader works perfect.

Before anyone comments chrome extensions.

These don't work on chrome mobile or safari mobile which make up a sizeable number of users.

Please, can we just have native dark mode?

I made a pretty mediocre HN client just for this feature https://github.com/rsimmons1/FlutterHnReader

I don't feel like working on it anymore, let's just have dark mode.

Edit: apologies spoke out of my domain on safari iOS, it supports extensions I'm an Android user.

please

[dead]

If you use Firefox, have my userContent.css DIY dark mode. Or you can massage it into the syntax expected by { Arc’s custom CSS, uBlock Origin, your CSS injecter of choice }:

  @-moz-document domain(news.ycombinator.com) {
    @media (prefers-color-scheme: dark) {
      body {background-color: #111 !important;}
      #hnmain {background-color: #181818 !important;}
      .c00, a:link, .subtext a:link { color: #eee !important; }
      .comhead { opacity: 0.5 !important; }
      a:visited, .subtext a:visited, .pagetop, .reply a { color: #777 !important; }
      button, select, input, textarea { -moz-appearance: none !important; color: #eee !important; background-color: #444 !important; border: 0.5px solid gray !important; }
      pre, code { color: #9d9 !important; }
    }
  }

Obvious caveats apply: it’s mine, it’s certainly incomplete, yadayada. But hey, been working for me for years! Also, now that you know that the feature exists, you can probably search "Hacker News dark mode userContent.css" and find better / more complete ones :)

Always a pleasure helping tasoeur.

Perhaps Greasemonkey can do the customization(s) you would like:

  You can add styles that override existing styles, or styles 
  specific to new elements that your user script inserts.[0]

HTH

0 - http://greasemonkey.win-start.de/patterns/add-css.html

Here is a Tampermonkey¹ script I've used for some ime to make HN look the way I want it to (plain white background). It should be easy to adapt for a dark preference. It also adds a "bookmark" at the top of each page which is also easily removed if you don't want that.

https://pastebin.com/fnf4CeBM

¹ https://www.tampermonkey.net

For desktop folks, I use the Stylebot Chrome Extension https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

I crank up the font size and set a serif font on the index page to make it easier to scan.

The Chrome extension Dark Hacker News (https://chromewebstore.google.com/detail/dark-hacker-news/ib...) works pretty well.

I use my own CSS to override the default look.

I added thumbs up emoji for voting, book emoji for read comments, larger user names, larger headers, and dark color scheme.

https://postimg.cc/f3nmR6DG

https://pastebin.com/zeXGi4WQ

My attempt at providing the CSS to do this. This is where it turns into bikeshedding (T_T);

    :root {
      color-scheme: light dark;

      --base-color: #828282;
      --admin-color: #000000;
      --top-color: #222222;
      --top-sel: #ffffff;
      --c00: #000000;
      --c5a: #5a5a5a;
      --c72: #737373;
      --c82: #828282;
      --c88: #888888;
      --c9c: #9c9c9c;
      --cae: #aeaeae;
      --cbe: #bebebe;
      --cce: #cecece;
      --cdd: #dddddd;
      --ca2: #a30000;
    }

    center>table {
      background-color: #f6f6ef;
    }
    table#hnmain>tbody>tr:nth-child(1)>td {
      background-color: #ff6600;
    }
    font {
      color: #3c963c
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --base-color: #909090;
        --admin-color: #ffffff;
        --top-color: #dddddd;
        --top-sel: #000000;
        --c00: #ffffff;
        --c5a: #a5a5a5;
        --c72: #8c8c8c;
        --c82: #7d7d7d;
        --c88: #777777;
        --c9c: #636363;
        --cae: #515151;
        --cbe: #414141;
        --cce: #313131;
        --cdd: #222222;
        --ca2: #a30000;
      }

      center>table {
        background-color: #222;
      }
      table#hnmain>tbody>tr:nth-child(1)>td {
        background-color: #a74300;
      }

      font {
        color: #639663
      }
    }

    body  { font-family:Verdana, Geneva, sans-serif; font-size:10pt; color: var(--base-color); }
    td    { font-family:Verdana, Geneva, sans-serif; font-size:10pt; color: var(--base-color); }

    .admin td   { font-family:Verdana, Geneva, sans-serif; font-size:8.5pt; color: var(--admin-color); }
    .subtext td { font-family:Verdana, Geneva, sans-serif; font-size:  7pt; color: var(--base-color); }

    input    { font-family:monospace; font-size:10pt; }
    input[type='submit'] { font-family:Verdana, Geneva, sans-serif; }
    textarea { font-family:monospace; font-size:10pt; resize:both; }

    a:link    { color: var(--admin-color); text-decoration:none; }
    a:visited { color: var(--base-color); text-decoration:none; }

    .default { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color: var(--base-color); }
    .admin   { font-family:Verdana, Geneva, sans-serif; font-size:8.5pt; color: var(--admin-color); }
    .title   { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color: var(--base-color); overflow:hidden; }
    .subtext { font-family:Verdana, Geneva, sans-serif; font-size:  7pt; color: var(--base-color); }
    .yclinks { font-family:Verdana, Geneva, sans-serif; font-size:  8pt; color: var(--base-color); }
    .pagetop { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color: var(--top-color); line-height:12px; }
    .comhead { font-family:Verdana, Geneva, sans-serif; font-size:  8pt; color: var(--base-color); }
    .comment { font-family:Verdana, Geneva, sans-serif; font-size:  9pt; }
    .hnname  { margin-left:1px; margin-right: 5px; }

    #hnmain { min-width: 796px; }

    .title a { word-break: break-word; }

    .comment a:link, .comment a:visited { text-decoration: underline; }
    .noshow { display: none; }
    .nosee { visibility: hidden; pointer-events: none; cursor: default }

    .c00, .c00 a:link { color: var(--admin-color); }
    .c5a, .c5a a:link, .c5a a:visited { color: var(--c5a); }
    .c73, .c73 a:link, .c73 a:visited { color: var(--c73); }
    .c82, .c82 a:link, .c82 a:visited { color: var(--c82); }
    .c88, .c88 a:link, .c88 a:visited { color: var(--c88); }
    .c9c, .c9c a:link, .c9c a:visited { color: var(--c9c); }
    .cae, .cae a:link, .cae a:visited { color: var(--cae); }
    .cbe, .cbe a:link, .cbe a:visited { color: var(--cbe); }
    .cce, .cce a:link, .cce a:visited { color: var(--cce); }
    .cdd, .cdd a:link, .cdd a:visited { color: var(--cdd); }
    .ca2 { color: var(--ca2); }

    .pagetop a:visited { color: var(--admin-color); }
    .topsel a:link, .topsel a:visited { color: var(--top-cel); }

    .subtext a:link, .subtext a:visited { color: var(--base-color); }
    .subtext a:hover { text-de...