Comment by deleerium

5 years ago

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.

43 comments

deleerium

Reply
deleerium  5 years ago

For those who want something more traditional I've modified to have a slight orange tint on the title bar, and higher contrast for text. Seems to be better for a11y too.

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

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

  #hnmain { background-color: #1F2430; }

  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: #4a3226; }

  a:link,
  .sitebit, .subtext, .sitestr, .subtext a:link,
  .rank, a.morelink,
  .yclinks a,
  .comhead a:link, .comhead,
  .hnmore a:link, .reply a:link {
    color: #8c96ac;
  }

  .pagetop { color: #795848; }

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

}

edit: fixed imgur link and added full css

mrep  5 years ago

I prefer it straight black which this minimal CSS does (Screenshot: https://imgur.com/a/2lcy1Ga)

  :root,
  html { 
     background-color: white;
     filter: invert(100%);
  }
   
  * { 
     background-color: inherit;
  }

  • sfvisser  5 years ago

    Nice. You can also add a `hue-rotate(180deg)` to somewhat preserve colors and add `img` to invert images back to normal again.

    I have this as a bookmark and work well in many cases.

tallgiraffe  5 years ago

Love this. One addition, consider reducing the brightness on text so it doesn't glare as much.

  • JoshTriplett  5 years ago

    Please don't. Strong contrast helps readability; grey-on-color is lower contrast than white-on-color.

    Most HN threads linking to a site that has light-grey-on-dark-grey or dark-grey-on-light-grey text have at least one (off-topic) complaint about site style. Let's not make HN one of those sites.

    • teh_klev  5 years ago

      For me strong contrasts, especially on dark backgrounds, give me retina burns and eyestrain. I find pastel shades more comfortable. That said the grey text on white fad that happened a few years ago was a very silly idea.

      I guess everyone's mileages vary depending on their eyesight, my eye's are 53 years old now and aren't as spritely as they used to be.

      6 replies →

    • albedoa  5 years ago

      > grey-on-color is lower contrast than white-on-color.

      > Let's not make HN one of those sites.

      The OP of the thread you are replying to is #828282 on top of #f6f6ef. That is lower contrast than black on white.

      4 replies →

  • deleerium  5 years ago

    Tricky balance there. I was going for good contrast even when screen is dimmed or color shifted (think night modes, f.lux, etc.

    Maybe try to swap the #fafafa rule with #eaeaea? Does that feel better? It's still very high contrast so maybe that could be a happy medium.

clairity  5 years ago

looks good!

to preview, folks can live edit this page in inspector and paste these styles into a style tag.

in firefox, F12 to open inspector, hit '+' in the style pane to insert a <style> tag (but don't add a rule), then right click the inserted tag in the inspector pane and "edit as html" to edit the html, and finally paste these styles inside the tag and click out of it.

  • rptr  5 years ago

    Yes there is much better way. Install Stylus plugin and copy and paste the same script (except meta tag) with rule on domain. And it just works fine across all instances of domain.

umvi  5 years ago

Is there an easy way I can apply this using developer console so I can see what it looks like?

I want to try out the different styles in the comments, but I'm hesitant to upvote until I see for myself what it looks like.

gradys  5 years ago

I'm late to this party, but this is fantastic. I've popped it into the Firefox Stylus addon. Consider me a happy user. Thanks so much!