deleerium

I like it!

Looks like it is missing upvote arrows?

Lot's of interesting discussion going on. Since I can't update comments here I've made it a gist with warm.css and cool.css.

For those of you asking, feel free to do whatever you want with this CSS ^_^

https://gist.github.com/deleerium/ca6ddeed5dc07a81f764a83ecd...

Thanks for the heads up!

Yea of course it's just CSS :D

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.

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

The colors here on HN skew warm. Was wondering if anyone felt that way.

I like this scheme quite a bit. The white text on the orange bar is the only part I struggle with.

Why do you prefer neutral schemes?

I also added a screenshot if that is easier - https://imgur.com/a/mxaNky4

I just right clicked a few pages -> Save page as (static HTML/CSS/etc) then hack on the end of the news.css file. You can just append my css to that and you'll see exactly what I saw :)

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.