Comment by kohtatsu

5 years ago

Append this to news.css;

  @media (prefers-color-scheme: dark) {
      
      body { background-color:#000; }
      #hnmain { background-color:#000; }
      
      a:link { color:#eee; }
      a:visited { color:#b2b2b2; }
      
      .default, .title, .subtext, .yclinks, .comhead { color:#a2a2a2; }
      .admin { color:#eee; }
      .pagetop { color:#222; } /* not inverted */
      
      .c00, .c00 a:link { color:#eee; }
      .c5a, .c5a a:link, .c5a a:visited { color:#a5a5a5; }
      .c73, .c73 a:link, .c73 a:visited { color:#8c8c8c; }
      .c82, .c82 a:link, .c82 a:visited { color:#7d7d7d; }
      .c88, .c88 a:link, .c88 a:visited { color:#777777; }
      .c9c, .c9c a:link, .c9c a:visited { color:#636363; }
      .cae, .cae a:link, .cae a:visited { color:#515151; }
      .cbe, .cbe a:link, .cbe a:visited { color:#414141; }
      .cce, .cce a:link, .cce a:visited { color:#313131; }
      .cdd, .cdd a:link, .cdd a:visited { color:#222222; }
      
      .pagetop a:link, .pagetop a:visited { color: #000; } /* not inverted */
      .topsel a:link, .topsel a:visited { color:#000; }
      .subtext a:link, .subtext a:visited { color:#7d7d7d; }
      .comhead a:link, .subtext a:visited { color:#7d7d7d; }
      .hnmore a:link, a:visited { color:#7d7d7d; }
      
      textarea { background-color: #000; color: #eee; }
      
  }

Inverted most colours (ff - 5a = a5).

#eee for text colour.

#000 for bg (body, #hnmain)

#hnmain's background is set with an HTML attribute, !important might be necessary for some browsers? Not sure, but works on my machine(tm).

Edit: s/html/body/, wasn't necessary to select on <html>. Split body and #hnmain selectors.

6 comments

kohtatsu

Reply
kohtatsu  5 years ago

Tested thoroughly on threads and the front-page, some notes:

Upvote arrows blend with white instead of transparent, giving a weird look.

The orange goes well with black.

Not all users might want #000, but for OLEDs it's gorgeous.

The @media selector requires a OS/Browser support, to extend that a simple way is programatically add a .dark class to <body> (edit: based on a checkbox in their profile), and add selectors with .dark.

Some colours on the site are hardcoded, like the orange asterisk on your own comments, and newbie green. They both go fine with #000 imo.

Edit: tested on the other pages, looks good imo. Login/logout don't have CSS, which'd be a bit jarring.

It's a bit sad there's no distinction between the #hnmain and the background anymore, I think if that were desirable I'd probably change <body> to #111 or so.

  • ldd  5 years ago

    Did you try my latest solution?

    https://pastebin.com/CKy4HQXE [I'm not parent]

    let me know what you think ;D

    • kohtatsu  5 years ago

      Cute! Just tried on threads and the frontpage.

      I think #000 is the way to go for OLEDs, though I'm not 100% sure. I imagine it'd be nice to configure it. #cf looks cute too for text, I guess it's not super important to be closer to #fff? Maybe we just have good eyes tho w.

      Having contrast on the textarea with a different colour is definitely nice.

      Any reason you're selecting on .admin td and .admin? I didn't dig into the DOM too much; I just went down news.css going through each selector with a color:, then inspected elements to make sure none got through.

      The only new additions, similar to yours, is <body>, #hnmain, and textarea. input[type=text] could also be tackled, but I decided it was fine. Textarea is definitely a lot of bang for buck tho.

      The .c5a, .c73, etc selectors are also important; those are for downvoted comments.

      1 reply →