Comment by dang

Please, for God's sake, don't screw it up. I can keep up with news on this site from a 15 kb/s shared satellite link when I'm out at sea. Except perhaps for the really big threads. I love the simple interface. It's text, it's simple, it's readable, and when I hit the spacebar, it scrolls down a page. No fancy fonts, no javascript, no nothing. I love HN for its simplicity and speed. Thanks for maintaining a good engineering philosophy.

Screenshot: https://imgur.com/a/mxaNky4

Whipped this up real quick... keeps the spirit of HN I think, and is pretty minimal. Not my best CSS but tables/current CSS make some selectors a little tricky and after all, it's less than 1kb added, no markup or stack changes needed, and this is 'Hacker News' right? :D

@media (prefers-color-scheme: dark) { body { background-color: #1F2430; }

  #hnmain { background-color: #232834; }

  a:link.storylink,
  #hnmain > tbody > tr:first-child > td a,
  .commtext, .commtext a:link,
  td {
    color: #fafafa;
  }

  #hnmain > tbody > tr:first-child > td { background-color: #333a4a; }
  
  a:link,
  .sitebit, .subtext, .sitestr, .subtext a:link,
  .rank, a.morelink,
  .pagetop, .yclinks a,
  .comhead a:link, .comhead,
  .hnmore a:link, .reply a:link {
    color: #8c96ac;
  }

  a:visited {
    color: #979cf4;
  }

  .votearrow {
    overflow: visible;
    position: relative;
  }

  .votearrow::before {
    content: "";
    width: 0;
    height: 0;
    left: 1px;
    top: 3px;
    display: block;
    position: absolute;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 7px solid #bebfd1;
  }

  input[type=text],
  textarea {
    background-color: #333a4a;
    color: #fafafa;
    border: 1px solid #1F2430;
  }

}

Edit: missed a few on other pages! Added arrow CSS patch, added screenshot from imgur, added text input colors for profile and replies.

I have some styles I use. Screenshots:

https://imgur.com/a/WZAaJST

I don't love when dark modes skew blue, so tried to keep it neutral with blacks and greys

``` @media (prefers-color-scheme:dark) { body { background-color: #2a2b2e; } #hnmain { background-color: rgb(32, 33, 36); }

  a:link, .hnmore a:link, a:visited, td, .c00, .c00 a:link {
    color: #e8eaed;
  }
  .subtext, .comhead a:link, .subtext a:visited, span.subtext a:link, .subtext a:visited {
    color: #9aa0a6;
  }

} ```

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

One-liner inverts the brightness and preserves the orange.

minimal CSS to add (nothing to remove):

https://pastebin.com/4JYbSi5F

[edit]: fixed, shorter version: https://pastebin.com/dT4KKt3s

[edit 2: fixed textarea, dead links: https://pastebin.com/CKy4HQXE ]

[edit 3: added a screenshot: https://imgur.com/a/Ont553x ]

I'll check this thread but also feel free to email me zain@yc for more feedback - just add [HN FEEDBACK] in the subject :-)

don't worry, we'll make sure we don't pull a reddit on you ;)

You can look at UserStyles.org for inspiration. They have many user created Hacker News dark mode themes available there: https://userstyles.org/styles/browse?search_terms=hacker%20n...

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.

I've been using a "Hacker News Dark" userstyle [1] with Stylus for years, it's only ~30 lines of CSS with a permissive license (CC0). I'd love to see something like it integrated into HN itself.

It'd also be nice to have a way to enable the dark theme without logging in, alongside a persistent setting for logged-in users. A link in the header/footer to set a cookie is probably the simplest way to accomplish that.

[1]: https://userstyles.org/styles/113994/hacker-news-dark

Small request while you're at it: preformatted/code blocks don't display well on smartphones in portrait mode, as there's too much margin at the sides and scrolling becomes awkward. You can test it here:

    text = '"The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the alphabet. It is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired. Owing to its brevity and coherence, it has become widely known.'

    for i,c in enumerate(text):
        print(i, ord(c))

Update: turns out that the margins problem also exists on desktop, but the problem doesn't cause as much problems there.

Alligator energy.

I hadn’t heard this term before, and just read that an alligator can store up to 60% of the energy it gets from food as fat, mostly stored in the tail.

A large adult in average condition could survive two years or more without food!

https://books.google.com/books/about/Alligators.html?id=0UDL...

My version looks like this: https://imgur.com/a/KCHi5mO

CSS:

@media (prefers-color-scheme: dark) { body { color:#cccccc; background-color: black } center>table { background-color: #222222;} td { color:#cccccc; } .admin td { color:white; } .subtext td { color:white; }

    a:link    { color:#cccccc; }
    a:visited { color:#eeeeee; }

    .default { color:#b2b2b2; }
    .admin   { color:#ffffff; }
    .title   { color:#b2b2b2; }
    .subtext { color:#b2b2b2; }
    .yclinks { color:#b2b2b2; }
    .pagetop { color:#dddddd; }
    .comhead { color:#b2b2b2; }


    .c00, .c00 a:link { color:#cccccc; }
    .c5a, .c5a a:link, .c5a a:visited { color:#aaaaaa; }
    .c73, .c73 a:link, .c73 a:visited { color:#838383; }
    .c82, .c82 a:link, .c82 a:visited { color:#727272; }
    .c88, .c88 a:link, .c88 a:visited { color:#777777; }
    .c9c, .c9c a:link, .c9c a:visited { color:#6c6c6c; }
    .cae, .cae a:link, .cae a:visited { color:#5e5e5e; }
    .cbe, .cbe a:link, .cbe a:visited { color:#4e4e4e; }
    .cce, .cce a:link, .cce a:visited { color:#3e3e3e; }
    .cdd, .cdd a:link, .cdd a:visited { color:#222222; }


    .pagetop a:visited { color:#cccccc;}
    .topsel a:link, .topsel a:visited { color:#222222; }

    .subtext a:link, .subtext a:visited { color:#727272; }

    .comhead a:link, .subtext a:visited { color:#727272; }

    .hnmore a:link, a:visited { color:#727272; }

}

    .hnmore a:link, a:visited { color:#727272; }
}

Please, don't just force a dark mode to everyone with "prefers-color-scheme: dark".

Some are using OS in light mode, but would still like to use the dark mode. Sometimes, it might be useful to use the light version on dark systems. (e.g. if the dark css is not well made or looks bad on some monitors)

Here's a good thread about it: https://twitter.com/SaraSoueidan/status/1245722023361380354

Here's a version based on the one by ldd. Unlike the others I've seen posted, it maintains the original contrast, the orange header, and doesn't make the upvote button ugly.

https://0x0.st/iLYb.txt

EDIT: one problem. The header image on pages like[1] doesn't look good. Can you change the white background to transparency?

https://news.ycombinator.com/newsfaq.html

Are you ok with using CSS variables? Without them or some preprocessor, a dark theme would mean a lot of repeated selectors. https://caniuse.com/#feat=css-variables

I have run an HN clone for China's Linux hacker community, we use dark & green color and it's pretty cool in my view, you can check the page archive here: https://web.archive.org/web/20170905074904/http://hack.fdzh....

The source code: https://github.com/fdzh/anarki/commit/5a58ef38111215258a2694...

BTW, I would recommend using Eigengrau rather than total black. https://twitter.com/AustinTByrd/status/1105822085362925568

Anyone who wants to make a suggestion is welcome to.

I'm not a programmer, so I'm probably saying something incredibly, fantastically stupid. Take this in the spirit of "Brainstorming" where you say even the stupid stuff because that sometimes leads to good things.

I am not a programmer, but I do know some HTML and CSS and studied it a bit and Blogger (aka Blogspot) let's you dig in the code of the theme if you want, but it also has a user-friendly section where you can change colors and stuff and it let's you "add CSS" there and I do add CSS snippets there to tweak my websites.

I have tried digging in the code a few times. It's never worked for me. But adding CSS snippets is something I can handle.

You already have a feature to select your top bar color. Would it be feasible to expand that feature a little to let people select dark mode colors? (Ie to change more colors than just the top bar.)

Right now, the profile has a single property "topcolor" where you can slightly customize HN. It seems that this could easily be extended with a few more similar properties, suitable values of which could produce a darkmode.

You already let us change the top bar color I preferences. Really, this is just a adding “text” and “background” colors - swapping white and black.

This could be a check in preferences, load from the DB the same time as the top bar, then insert into template or however HN is organized server side. Probably <10 lines of total code, If you include DB changes.

It would be all server side so we shouldn’t have an issue in terms of bandwidth.

Would it be an idea to open a github repo for this and let the community contribute their efforts there?

Most solutions seem to be aiming for a quick fix. HN’s classes and HTML probably rarely change, but using css variables would lead to a more maintainable solution than duplicating all the selectors.

(I’d contribute a solution but currently moving across the country with only my phone available)

Challenge accepted: https://github.com/prettydiff/hn_dark

The CSS works well for me, but I understand presentation is highly subjective and some people may not like it.

Perhaps more important is that tiny bit of JavaScript in the readme.md so that anybody can rapidly experiment with CSS themes for Hacker News on live pages with just copy and paste.

This was my first time to do a deep dive into the front-end code of Hacker News and the HTML is archaic. If you would like I can help spruce it up to modern 2008ish HTML code that is fully semantic, accessible, and much better for SEO. Just let me know how I can help.

Don't go the way of CSS filters. I tried some of the CSS people here pasted that used it and it is slow. When I scroll fast Firefox can't keep up and I see white background for a second or two before it renders.

What about just grayscale[1]

[1] https://i.imgur.com/ZfoXaem.png

Parts changed [HTML]: <body style="background-color: #1a1a1a;"> <table bgcolor="#2a2a2a"> <img src="y18.gif" style="border:1px #353535 solid;">

Parts changed [CSS]: a:link { color:#808080; text-decoration:none; } .subtext { font-family:Verdana, Geneva, sans-serif; font-size: 7pt; color:#606060; } .subtext a:link, .subtext a:visited { color:#606060; }

Header links: #b5b5b5 Header link divider: #666

+darker icons

Here's a custom theme I've been using for years: https://github.com/darekkay/config-files/blob/master/userscr...

And please, don't _force_ the theme by using prefer-color-scheme. Use it as default, but please give the option to override it.

This commenter linked their own custom stylesheets that they've already been using: https://news.ycombinator.com/item?id=23198500

I haven't inspected their quality or thoroughness myself, but it seemed like a certain amount of that was implied

"Move slowly and preserve things" killed me. Not sure if I agree with it entirely but I love having this in my vault

In our profiles we can already set topcolor, why not just add fields for bgcolor and textcolor too?

Website with no images? Easy, this is all thats needed:

    @media (prefers-color-scheme:dark) {
      html{
        filter: invert(1) hue-rotate(.5turn);
      }
    }

Its works so well because it keeps the balance of contrast between elements.

Don't over-do it: just start by inverting all the colours ( https://imgur.com/a/uOVCoWz ) and then tweak as necessary for branding.

for the ui pros that want to take a shot at this you can use Charles proxy to redirect the css of the live site to a local file for testing.

it's a good hack to save you a bunch of dev setup time or if you have a production only issue.

happy hacking

Great! And a big thank you for managing the site!

Btw. TIL that you can use `comments > $x` in Algolia's search. That's a cool feature (didn't know about that) or use popular search engines' `:site` ...

@media (prefers-color-scheme: dark) { { html {filter: invert(1)} }

Firefox for iOS has an “Enable Night Mode” that does a great job with HN in dark mode. Maybe you can start with the Firefox iOS Night Mode CSS and minify from there...

Please consider 2 different dark modes:

a "normal" dark mode and one for oled screens which has the background straight black

on the topic of css I've been meaning to ask why hn is so big on iPads since ios 13 (https://imgur.com/bcfeEWB)

is that just me? phones work fine, laptops work fine. But iPad pro 12.9" has been like that since the release of 13

Please make sure the background color is actually black or dark grey, and not some shade of blue.

Perhaps make a mobile friendly stylesheet? Please!!!!