[deleerium]

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.

[deleerium]

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

[franz899]

Thank you, it looks good

I've added this code to fix the reply textarea colour:

.fatitem textarea { background-color: #232834; color: #fafafa; }

[deleerium]

Thanks for the heads up!

[behnamoh]

Thanks man, I already applied it to my HN using Stylus extension.

[BossingAround]

Looks great to me!

[Borlands]

Looks good!

[mrep]

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]

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.

[snowwrestler]

I applied a few of the suggested code blocks in this thread, and this is the one I liked the best.

[deleerium]

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...

[tallgiraffe]

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

[JoshTriplett]

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]

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.

[im3w1l]

It's all about your monitor settings. High contrast monitor - you prefer low contrast style. Low contrast monitor - you prefer high contrast style.

This is something I don't like about VS Code. by being low contrast it means I have to turn up monitor contrast meaning everything else burns.

[tallgiraffe]

Great point. Our environmental factors are so easy to forget. I do use a very high contrast monitor and definitely prefer pastel colors at night, so my eyes dont hurt, but now I can clearly see how someone with low contrast wont' see a damn thing.

There is a solution, but it's a bit more complicated and requires introducing additional user preferences. Supply two color options in the css, and allow user to choose high/low brightness.

HN already has some profile filters, so adding one more might not be a problem, but I can also see how it becomes a slipper-slope of new features.

[ksaj]

Most modern monitors (and operating systems for that matter) have functions for day and night colour temperature schemes. I use it a lot since I love reading in bed but don't want to give night blindness to my other half.

If the OS has it, you can set it to gradually phase in and out of the temperature change at a particular time. The Radeon drivers go one step further by understanding that as the year progresses, "night" and "day" happen at different times.

[stev0lution]

Sorry for asking but is there any reason why you don't just use a different color theme for VS Code?

[im3w1l]

Fair enough. It's because it's not my main editor, and I didn't look into theming.

[teh_klev]

I have three Dell 24" panels dating from 2005/7 ( 1 x 2405FPW and 2 x 2407FPW). They're not really what you'd call "high contrast" these days given their age.

[Symbiote]

There's plenty of space between #000 on #fff to provide an on style with high contrast.

https://contrastrebellion.com/

[albedoa]

> 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.

[JoshTriplett]

I was responding to the comment I directly replied to, not commenting on the specific color scheme of the style.

[albedoa]

You said: "Let's not make HN one of those sites."

Either it is already one of those sites or there is room between the most extreme contrasts. Pick one.

[JoshTriplett]

HN is currently "black on very light background". The equivalent dark mode would be "white on very dark background". I hope we end up with either that, or even better, white on a black background (because that would be great for devices with OLED screens, including many phones).

[dandellion]

I agree, that level of white usually gives me eye strain after several minutes, even in a well lit room. The readability mode of Firefox for example uses #eeeeee for the text and #333333 for the background [1], I'd suggest using the same tones which are still very high contrast but don't cause nearly as much strain.

[1]: https://www.theregister.co.uk/2019/07/10/firefox_68_arrives_...

[deleerium]

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]

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]

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.

[rptr-gfx]

Thanks for this. This is the best dark mode skin i found yet.

Can I create stylus theme out of this share it?

[deleerium]

Yea of course it's just CSS :D

[umvi]

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.

[matt_LLVW]

stylus extension let you write styles per sites. there's also a centralized place to find already written styles. I use https://userstyles.org/styles/161954/hackernews-one-dark

[DHPersonal]

I tweaked and combined two existing Stylus entries called "Hacker News Readable" and "Hacker News Readable Dark" to make a layout that changes from light to dark mode with the system settings. https://jsfiddle.net/DHepworth/e4kwpr9j/2/

[deleerium]

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

[minikomi]

View source, add a style tag to the header after the official styles, select the tag and use f2 to edit as text, paste the styles in.

[deleerium]

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 :)

[8note]

You could add it to your user stylesheet?

[arthurcolle]

Where is that?

[gradys]

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!

[narag]

This is really nice, discreet and readable. Good job!

[cylinder]

wow, I usually hate dark modes but I like this better than the current HN!

[orastor]

This one, please