Hacker News Reader

Comment by dang | Hacker News Reader

Ok, you guys, this isn't the first time we've heard this request (https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...). I'm willing to do it (edit: not to change the default! just to add the option). It's just that any CSS issue that goes more than a quarter-inch deep is outside both my expertise and my interest.

We can add CSS to https://news.ycombinator.com/news.css for prefers-color-scheme: dark, but that leaves open the question of specifically what CSS to put in there. Anyone who wants to make a suggestion is welcome to. Post it in this thread so others can comment, or email it to hn@ycombinator.com. I've roped Zain, YC's designer, into helping with this, and we'll come up with something.

p.s. If you're inclined to post "this is 2020, how come HN doesn't $thing", remember our motto: move slowly and preserve things: https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que.... When I say slowly I mean slowly. This is also called alligator energy. https://news.ycombinator.com/item?id=16442716

View on HN

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.

Completely agree with you

I'm on board with ceasing and desisting from screwing it up.

Thank you dang, you've been an amazing steward for this community and the technology that powers it.

Keeping something the way it is, is super hard in tons of ways a lot of us probably don't understand. We appreciate you.

Can we have a review before we merge the change? Make sure all issues are ironed out.

HN design is simply the best thing out there. "Moving slowly and preserving things" - I would get this engraved on my grave. This philosophy has died unfortunately and with it went robustness, simplicity, elegance, poise, beauty, accessibility, elegance, maintainability and practicality.

Thanks dang for your gandalf-like wisdom and your resilience. I like Alligators over goddamn mosquitos that have taken over the internet.

We can have what would undoubtedly be one of the world's largest code reviews, and for a vanishingly small piece of relatively mundane code.

Please dang!

The mother of all bike sheddings. A whole subcommittee to decide if the Braille version should have indents instead of bumps.

How can anyone even dare to think about indents? C'mon, I thought this was settled. Did you know that human fingers can detect roughness value down to N7? That's 1.6 micrometers. There is a bigger fish to fry than just think about indentations or bumps. Texture. Texture is everything and there is nothing else to talk about, although I am open for other ideas. Thoughts?

my favorite version of this is "man lsmod". About 70 words and supposedly maintained by multiple people.

Couldn't agree more.

I screw up ceasing and desisting all the time :-(

Q.E.D

What browser support do you expect?

https://caniuse.com/#search=css%20variables

https://stackoverflow.com/questions/44271920/css-variables-w...

There are many ways for end users to force dark mode without any change on HN. "invert page colors" chrome extension, for example, does a nice job. Not ideal, but good enough.

I second the other commenter, don't do anything. Or get someone really good to help you!

I flipped a flag in chrome for mobile. HN Looks very good (The reply button is white on grey)

There's a very solid Stylus theme for HN that I've been using as long as I can remember. Until just now I had honestly forgotten that this wasn't what HN looked like by default.

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

Doesn't work without JS.

hmm. I just tried turning off JS and reloaded Firefox. Everything seems to still work fine on HN with the theme on. I don't know much about web dev so I'm not sure what could be causing it.

Upvote and downvote buttons become invisible.

Edit: my fault. I have too many dark mode addons/stylesheets enabled at the same time.

There are 2 HN dark themes available at https://github.com/UserStyles.

Midnight lizard (chrome) https://chrome.google.com/webstore/detail/midnight-lizard/pb... is a good extension that can create a dark theme by changing the contrast & things like that. It does it in a way that the same theme will work on a lot of sites. They do have more dark (& light) themes on their site & you can create your own by entering a few colors & it will create a theme based on that. Stylus is good (NOT stylish), but Midnight lizard creates themes in a way that are compatible with a lot more sites that Stylus.

I just tried out Midnight Lizard. It works surprisingly well but I can see myself wasting hours fighting with it trying to get it tuned perfectly.

Is there a non userstyles.org link for this? I've blocked cookies on userstyles.org (For obvious reasons) & when you black cookies on that site it gives you a blank page. If you enable cookies it comes back.

https://github.com/Poorchop/userstyles/tree/master/HackerNew...

I tried various of dark mode plugins in Firefox and none of them seem to be able to do their job without obvious shortcomings. For example most of them don't check the original color of the website and just invert colors of dark pages as well. Or in some cases it doesn't invert all text colors, making hyperlinks hard to read.

None of the extensions I've tested can match the dead simple CSS override I used in qutebrowser.

Have you tried Dark Reader, I'm pretty happy with it: https://addons.mozilla.org/en-US/android/addon/darkreader/

It's also supported by current Firefox Preview on Android. Works well.

I just started using Dark Reader yesterday, and for the most part, it's excellent.

old.reddit.com comments are mostly unreadable, and it cripples gmail, but I've learned to take advantage of Options-Shift-D to flip it on and off when needed.

It's now part of my web browsing workflow.

People can edit HN CSS with extensions. There is actually an extension that inject CSS into websites. So you can do that.

Such extensions do not work everywhere.

They work everywhere Firefox can run.

An alternative is to "opt-in" sort of how you can change the top bar color with enough Karma. Maybe that CSS is not loaded for people who dont have that same Karma? I assume people asking for the feature post often enough.

Edit:

To clarify what I mean is maybe toggling which style sheet HN gives you in settings would be ideal for all. Web standards are nice but they dont help in the minimalist ideals of HN too much.

Really? How much karma do you need for that? This is my first time hearing about this.

250 iirc

Daaamn, I'm at 60, so a little over 20%, I will geet probably thhe general dark mode before the customize topbar css feature lol

Also, not only should "dark mode" be the responsibility of the browser, it already is. There's plenty of plugins that do this and people that want it should use them.

(http://i.9ol.es/dark.png)

Sadly few browsers support extensions on mobile, which is possibly where dark mode is most useful.

firefox does;it works great

chromium for android is open source ... that's where the solution should be and if you're really passionate about it, go do it. It shouldn't be the responsibility of every individual website to independently implement the feature.

Could you imagine if we entrusted every website to independently implement scroll bars and zoom? What a mess that'd be.

While I partially agree with you (that's why I upvoted) in that it's a waste of everyone's time having every website developer worry about dark mode I still think scrollbars and zoom are fundamentally different from a dark mode in that the latter cannot be detached from aesthetics.

The color pallete of a page is important, and maintaining a consistent look and feel across normal and dark mode can only be done reliably by each website's designer.

So I guess we need both the ability to have the browser auto-calculate a default dark mode, and a way for aestetically-conscious web designers to override it, and that's what we're moving towards.

but dark mode is an accessibility feature and used to be called high-contrast mode. This is a solved problem and has been for at least 30 years.

In fact it's already in chrome on android, no work needs to be done (other than enabling it). Here's an image gallery guide I made: https://imgur.com/a/njNTO6T

This is the right approach, it should be solved at the browser level. In fact, it already is.

The only responsibility of web developers should be to not go out of their way and do silly things that break this.

IMO it's two separate things. Both useful on their own right.

High contrast is very useful for people with visual difficulties, but might even be counter-productive for certain types of eye strain.

I'm under the impression people asking for dark mode are looking for something that will emit less light off their screens, not necessarily make it look nore contrast-y, and the two are more often than not opposite.

Dark mode is an accessibility and ergonomics feature that should be supported by websites through CSS whenever possible. Of course browsers need to support it in the first place for it to work, but that seems to be mostly the case:

https://caniuse.com/#feat=prefers-color-scheme

I’m on land in a well populated city relatively near the Bay Area and I get about half a bar on my phone. So yes! Please don’t screw this up! Because not only I like reading HN but also because it’s the only thing I can do on my phone now and it’s really helping me kick all the bad habits of being on my phone!

Thanks!

Well, if we want HN to follow best modern web practices, I recommend rewriting the whole thing with React/Node.js using TypeScript. Then, we can get a proper CSS framework in place like Material that will really allow us to get everything looking really good. I can design a cool looking loading screen that says "HN" while the JS is loading in the background.

Well done... I nearly downvoted you from the rage I felt before realising it was sarcasm...

without your comment I wouldn't have detected the sarcasm, I was aghast

Aw man that sounds really cool. I bet you’ll only need a team of 5 people to do it too.

What’s the tool chain manager look like for managing the build process manager?

We should probably redeploy it on Kubernetes so the backend can scale, one c5.xlarge instance per session to keep up with the requests.

Blockchain. No one said blockchain yet. We have to blockchain it. Blockchain it with cryptos.

Also, if there's any way to incorporate machine learning algorithms into it, please try to find a way to do that.

Of course. Obviously, we'll store the algorithm on the blockchain and train it with a custom YCombinator bitcoin that replaces karma.

Also add a VR and AR, that will be super cool.

All this will be AI powered, I assume?

The best electricity comes from AI

Ironically, AI itself uses electricity.

5G and 8K as well.

But it will spread covid

Will it power my house as well? Can I get some free here?

Yes, AI running on drones.

It is also important to incorporate chatbots

I think this is now my highest voted comment on HN.

I don't know how to feel about that.

I agree. Currently HN pages load instantly which in these days can be disconcerting.

And weights sooo little. It should have at least 10MB js framework bundle as my fiber link is bored.

Let's rewrite this thing in C and compile it to webassembly!

This was sarcasm.sorry.

I think it should be Vue, what with the patents-clause with React and everything

cool but what will we do for next month?

don't forget to create an electron app for it

I think you are jumping the gun. First we need a scrum master and product owner to make this Agile.

Oh please, React is so yesteryear. With WebAssembly, we can rewrite the HN frontend in Rust! \o/

For the sake of simplicity, could we just serve up a subdomain darknews.ycombinator.com, same content, just different stylesheet?

That's not simple at all..

When you click on a link to the news.ycombinator.com domain, what should happen if you prefer dark mode? And vice versa?

In comparison, the pure-CSS ideas that some people are posting would work automatically if your browser supports dark mode, and would enlarge the (cached with long ttl) CSS file only very slightly.

Unfortunately, there are some of us who also like the solarized type light mode in HN more than dark mode, but we use dark mode at the system level because the OS light mode is awful.

Pure CSS would be quite cool, but we'd probably also need a snippet of JS to add a button allowing to switch between light and dark mode. (There's probably a way to do it without JS that someone will hopefully comment too.)

They could put a preference in the profile page. But I think that switching the theme would be the browser's job.

By using CSS variables, only a few lines of JS are needed- small enough that they can be inlined in the HTML.

I don’t think you’ve properly considered what a terrible idea this is.

Please explain as I am curious

Adding dark mode CSS adds a few hundred bytes, maybe a couple kb at most to the site.

A separate subdomain:

- Requires separate TLS certificates to be maintained.

- Doesn't play nice with caching.

- Doesn't play nice with password managers.

- Doesn't work with any existing links. Users would have to manually add the `dark` prefix.

- Is generally a bad user experience.

While I agree with most of your points, I disagree with

> Doesn't play nice with password managers.

Check your password manager settings. Most have options to match on domain, subdomain, port or have the ability to set equivalent domains either globally or per credential.

Tagline: "Come to the dark site."

Ha, remember the first time they tried a mobile layout? That was quickly yanked (to much rejoicing). If the dark mode has some issues, we can always go back and try again. The main thing I care about is making sure it's still easy to read (good contrast).

Hah, HN's load speed actually makes it my go-to bookmark to test if everything is working okay. Internet connectivity lagging? Check HN. My own web app loading slowly? Check HN.

If they screw it up then I'll personally host some service that scrapes all the text and only dumps a few kbs to you :)

Honestly theres a lot of other sites that would benefit from that too. A well written and maintained scraper for a bunch of popular sites may be worth a subscription for some bandwidth limited people.

I've thought about this, too; some of my favorite sites are forums that are a pain to use on mobile (e.g. RuTracker).

Seems like a fun project, so I may start planning it when I have time.

Be careful with that: it very probably goes against all sorts of TOS and can get you in trouble

A court recently ruled [1] that LinkedIn had to allow scraping, but it has to be public data (i.e. you can't log into your Facebook account and then scrape all your friends' pages).

[1] https://www.eff.org/deeplinks/2019/09/victory-ruling-hiq-v-l...

It's not the scraping itself that I would be worried about, it's using this data to create what could be seen as a competitor (especially if you make it commercial). For a lot of these websites, traffic is essentially money: diverting users to another website using their own content would be very badly received

Thanks for the heads up.

I was more thinking about a local web-app that consumes the site and then outputs it in a nice mobile layout, without actually archiving or saving anything.

Seconded. I'm using a cellular hotspot due to lack of HS options, even here in the outskirts of Austin. KISS.

I think you guys overreact a bit, your reply alone occupies more bytes than the CSS needed to implement dark mode; it wouldn't affect anything related to scrolling with space-bar, or fonts, or JS functionality.

True, serving it to you was negligible, but that little extra being served millions of times, once for every request, in aggregate slows down servers, eats up peoples’ data, raises costs and generally quickens the heat death of the universe.

It's a KB of css, if that, probably much less. Cached, in a stylesheet request, not a style element. It's nothing. It amortized, not more data for every request. It's nothing.

The css doesn't need to be inlined in the page, so unless you disable caching it's not served for every request at all.

Indeed, HN is one of the few sites that works well in Antarctica.

"No fancy fonts, no javascript, no nothing."

Truthfully, there is some Javascript. For example, onclick(). Voting without Javascript requires some extra effort.

True, but doesn't this even save bandwidth because it doesn't need to reload the whole page just to update that detail? Either way it still works without JS, which can't be said about most modern websites.

"... which can't be said about most modern websites."

While I understand and agree with your point, I have personally found this quoted portion to be a false assumption.

To me, "works" means I can retrieve the content of the page without using JS. If the websites we are discussing are ones where the primary purpose is reading, like HN, most will "work" for me without JS, so long as I do not rely on try using a "modern browser" to retrieve the content. In fact, I cannot even think of a single website meant for reading that I cannot read without a Javascript-enabled browser.

Any newspaper website with a paywall or cookiewall or anti-adblock thingy maybe?

That's not much readable without some trickery

Not trickery, just avoid using "modern browser" to make the HTTP request.

Name any newspaper website you think is "not much readable" without Javascript or cookies and I can prove that is a false assumption.

This is JavaScript done right and worth keeping enabled.

> without some extra effort

Thanks for the riddle! I guess you could use iframes?

Edit: Ohhh and you could use data-urls as iframe src, so as not to make a large number of requests.

> actually deploys new reddit design on HN like a boss

It'd be like iOS giving us emojis back then when it instead needed innovation. Having said that HN can use some formatting.

How can you keep up with the news when HN only records the headlines and the articles are stored elsewhere, usually on extremely heavyweight news sites?

It even loads fast on my eReader web browser, which is quite rare these days.

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.

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.

You could add it to your user stylesheet?

Where is that?

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

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

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

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/

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.

This one, please

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.

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.

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

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

Looks good!

Looks great to me!

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

Thank you, it looks good

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

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

Thanks for the heads up!

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

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.

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

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

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.

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

The top post is #828282 on top of #f6f6ef, a pretty low contrast of 3.541 compared to 21.000 for black on white.

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.

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.

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

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

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.

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.

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.

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

https://contrastrebellion.com/

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

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.

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

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

Can I create stylus theme out of this share it?

Yea of course it's just CSS :D

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

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

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.

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

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!

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

} ```

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?

Looks awesome!

Please have a look. I shut my windows and turned off the light for this exercise. Just added a tick more warmth. https://imgur.com/a/t1aQaDv

    #ffffff // info white
    #d9d9d9 // text white
    #282828 // background gray
    #222222 // the other background gray
    #ff6600 // HN orange

(Notice how beautiful regular this hexes are looking.)

Source for a CSS simlpe arrow https://css-tricks.com/snippets/css/css-triangle/

This is nice!

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

One-liner inverts the brightness and preserves the orange.

Unfortunately the colors are a bit too bright for the dark page.

append brightness(.9) to the end of the filter

This is the hacker-est option, I love it. So simple

This surprisingly works well. One thing, the background of body is still white for me on desktop this is what I have (combine with someone else who commented about the brightness):

    @media (prefers-color-scheme: dark) {
      body {
          background: #222222;
          filter:invert(1) hue-rotate(180deg) brightness(0.9)
      }
    }

Edit, also works on hn.algolia.com

> the background of body is still white for me

Had the same problem, changed "body" to "html", added background: #fff, now it works.

I turned it into a bookmarklet to make it easy to use on any website:

javascript:styles='html {filter: invert(1) hue-rotate(180deg) brightness(.9); background-color: #fff; }'; newSS = document.createElement('style'); newSS.type = 'text/css'; newSS.innerHTML = styles; document.documentElement.getElementsByTagName('head')[0].appendChild(newSS);void(0);

Use stylus to automatically inject it.

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 wonder if removing the whitespace on the original, while adding this, would give us a net filesize modification of 0

Most likely! Then again, modern CSS is pretty awesome. Not flawless, but so much better than 10 years ago.

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

I replied to the top post, but just in case, here is my idea

It uses prefers-color-scheme and 28 lines of CSS:

https://pastebin.com/4JYbSi5F

And just in case 28 was too much, here's an improved version in 10 lines of CSS:

https://pastebin.com/dT4KKt3s

> we'll make sure we don't pull a reddit on you

From all of my heart: Thank you!

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

As a shareholder of reddit, that hurts.

As a user of reddit and HN, thank you, I couldn't agree more.

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.

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.

Blending the upvote arrow is fixed with filter:invert(1), as in my solution[1]

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

Woah cute. It's funny too because I'll browse with inverted colours as a hack on iOS.

Did you try my latest solution?

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

let me know what you think ;D

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.

great point about #000. I didn't think about OLEDs.

I also followed the same recipe: I copied all things that changed `color` or `background` and tried as best as possible to change the minimum possible to get a dark mode.

Anyways, regardless of whether any solution makes it in the end, I found this whole exercise to be pretty interesting!

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

This ability might have helped them survive the KT extinction, when food was scarce.

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

Perhaps it would be an idea if we could add our own CSS in a textarea on our user page.

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

I feel like this should be a browser feature: toggle light / darkmode for a given site. Maybe you dont agree with their interpretation of darkmode...

I agree. I think the default behaviour is good. prefers-color-scheme: dark should be the default, but be changeable browser wide (not sure if this is already the case) or per domain - just as it works with webcam access (storing the permission to view webcam for a given domain).

I get it, but at the end of the day it's up to a site owner, surely? Much like we get to choose our site design, we also get to choose whether it's dark or light. It has always been this way.

The CSS property is a good indicator that you prefer a dark color scheme. In my case by turning this on I want an all dark UI on everything I use - all the time. Do we really need to force toggles on every website we build now for a small number of users who want a dark browser UI, but light websites? I'd prefer to go with the assumption that they want the design dark too.

I agree. Browser-builders should provide a way to configure the wants-dark-mode css query.

This should be a browser option, not a website option.

If your browser tells the website you want a dark version, you’re getting a dark version. Seems right, doesn’t it?

What if I want only HN to be dark? Can I configure it per site yet?

I have no issues with 3 options:

- Use browser

- Light

- Dark

Though. I think it’s too much configuration though.

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

awesome! yeah, the first couple of versions I posted had issues with dead links, and textareas.

Anyways, if @dang permits, we can start a github repo for this, until all the little issues are fixed. I just hope he sees that all of this can be done in just a few lines of code

Make a website that loads HN with a specific theme.

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

I don't think it's a good idea for HN to add this (a lot of work and potential downsides, for minimal returns), however you can do it using this extension!

https://chrome.google.com/webstore/detail/witchcraft-jscss-i...

I use it for a bunch of minor HN mods already, and it's great :)

My in-house tech support is opposed to me using browser extensions. I don't understand them and have never used them. I tried briefly to get one to work, then found out my tech support frowns on such, so I was happy to call it quits.

I have no plans at this time to go to a third party service for this or add an extension. Though I have been thinking since I wrote the above of changing my top bar color.

I'm fine with HN moving slow and preserving things. That works for me. But the only way I will go to dark mode on HN is if it is possible to somehow do that through HN.

Maybe someday I will change my mind about that. But not today.

Extensions don't work when you have a lot of different devices. I think I access HN with maybe ~5-10 different devices.

Being able to add some custom user definable CSS visible just for you on HN sounds like a great idea to me.

Extensions do not really work on mobile, unless you go out of your way to find something that supports them.

This is true for Chrome/Safari, which are the most popular mobile browsers. But Kiwi can run some/many Chrome extensions, and Brave has this on the roadmap for 2020.

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.

I'd love to do that just by offering people a CSS blob that we could inject into their CSS when they browse HN. Our original idea (actually kogir's idea from back in 2014—he's a forward-thinking guy) was that people could create skins this way, if that Winamp-era term isn't too obsolete by now, and share them.

However, someone who is plugged into Reddit told me that they used to allow user-defined CSS for customizing subreddits and had to roll it back because of security issues. They built an entire customization UI instead. That scared me off the idea.

My fear with a customization UI—the HN equivalent of which would be profile settings, as you indicate—is that it would get way too complicated too quickly. How many additional settings would we need?

If someone can define a not-too-complicated set of profile settings which, when filled in to taste, would solve people's dark-mode concerns, I'm all for it. We could even make a separate editor page for it and link to that from the profile. The other constraint is: for each setting, the input format would need to be simple to sanitize (e.g. 'valid hex color'). Otherwise we just create the security issue all over again, only with a shitty nonstandard application-level CSS editor instead of standard CSS.

>If someone can define a not-too-complicated set of profile settings which, when filled in to taste, would solve people's dark-mode concerns, I'm all for it

I posted a possible solution in another comment here[0]. You would have to write a separate dark theme, and there would be a single option to select it in the user panel. The data is literally just an integer pointing to an index in a whitelist of css filenames, and any errors would default to displaying the existing stylesheet.

[0]https://news.ycombinator.com/item?id=23198711

Reddit's user CSS was different, mods could edit it on subreddits and all visitors would receive it. On HN you'd only get the CSS you've set yourself, so there shouldn't really be a security concern (except for CSRF attacks against the settings form I guess).

Thanks—that's an important clarification, and maybe is the thing to do after all.

I would really like to see this: maybe release a "submit CSS blob" feature first and then, in a couple months, have a competition to pick the best style sheet?

Not so fast! Just because the CSS is only served to the authenticated account which installed it doesn't necessarily mean things are 100% okay.

There could be cross-site scripting attacks whereby the user clicks on something evil in a malicious site which attacks that user's HN authenticated session by installing some malicious CSS in their profile. The UI could require a confirmation of the account password for updating any security-sensitive properties.

Users could also shoot themselves in the foot with bad CSS. The obvious fix for that is that the profile settings page itself doesn't inject the CSS, or there is a safe variant of its URL which doesn't inject CSS.

Two great points. Thanks.

I would love to be able to define my own CSS that simply replaced the site’s settings, not just for dark mode. It would let me make changes that would be extremely useful to me.

For example, I’d hide the “hide” links on the main page. I’m sure some people love that feature, but I’ve only ever used it accidentally (fatfingering on mobile).

I’d add a bunch of additional hiding CSS. I’ve long wanted a “helps-me-respect-my-time” version of HN, where voting buttons, flag links, reply boxes, and reply links are all hidden.

This was, in fact, the original point of css. You're supposed to be able to add your own user-defined styles to "the cascade". Unfortunately modern browsers don't really implement this right and you're stuck using weird 3rd party plugins to accomplish this.

I think background color and text color options with inverted voting arrows (as suggested elsewhere in this thread[0]) would be enough for most people.

What.cd used to let you put a url in your settings that was injected as the stylesheet while you were logged in. This approach would let people publish and share themes--though shared themes could be a (pretty visible) security concern.

I remember also running into issues trying to use non-https-served stylesheets since the site was https and browsers balked.

[0] https://news.ycombinator.com/item?id=23199725

I previously customized HN a bit via my own CSS additions, with the Stylus browser extension. Personally I think that's a more feasible route for personalization than an interface for that on the site itself. However, there's a problem that HN's HTML layout doesn't lend itself to CSS work: you end up describing elements in terms of ‘a div two items down from the one embedded in that thing’, instead of just using classes. Sprinkling around some classes might be something to look at, for providing users the ability for customization. This should be pretty safe. I'd also say that the structure could be more semantic—but that may break browser extensions and similar existing customization.

P.S. I hurried to this thread because I noticed that the ‘collapse comment’ links became larger on my phone and I can finally hit them on the first try. Thanks to whoever did that, sincerely! Though personally I'd encourage you/them to make the link three times wider still, to take away even more effort. Dunno if it's much visual noise to others, but at least I don't think it encroaches on other elements.

Btw, another hopefully-not-controversial change that I would make is to have the post text black, not gray. It's a pretty important element, isn't it? So it should have high contrast and be readable.

The post text is light grey to discourage use of text-only posts, rather than links. HN is primarily a discussion forum centred around links to external content, and I think the site owners/maintainers want to keep it that way.

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.

> this is just a adding “text” and “background” colors - swapping white and black.

I would kindly invite you to skim the CSS suggestions that others made in the thread. It's not as simple as that.

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

That comes with a high level of user expectations that we couldn't possibly meet.

Looking forward to the pull request finally modernising HN into a React SPA

It's possible not everyone will realize this is /s :)

I think most readers of HN are technical enough to know that anyone sane would use Vue nowadays.

;)

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.

You don't need JavaScript to experiment with CSS. Just open DevTools and experiment away.

This approach, if you tried it, is just a one time copy/paste to impose an entire theme change, such as swapping CSS files.

There isn't a cross-browser one step way to swap CSS files on live pages that I am aware of, especially if CSP is enabled as is the case with HN.

Open DevTools. Go to Sources. Click news.css. Paste in your own CSS.

Still not a one step solution and its a bit different cross browser. Its not a one step solution because you have to either modify an identifier in the page to support another additional template or completely throw the default colors away so that the new colors replace the default colors.

The little one line JavaScript code is literally copy/paste which allows for moving between pages and page refreshes and pressing up arrow then enter on the keyboard to reapply the theme change without manually reapplying a new stylesheet and/or modifying the DOM each time.

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

Ah, I'm glad you mentioned that; I took a look at it earlier, but I think what would be most helpful is just the most minimal set of CSS we could put in curly braces after prefers-color-scheme: dark. In other words, a patch to https://news.ycombinator.com/news.css that would strictly only add lines—and preferably the most minimal that would do the trick.

For sure. I can try and whip something up later tonight if no other solution presents itself before then. I can email it or post here.

"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?

If that works, we could also make a list of suggested color combos for people who want an easy solution and don't know much about design and don't want to spend a lot of time futzing with it.

And, I mean, the moderators don't have to make that list. The users could share what color combos work for them.

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

due to HN's simplicity it's already pretty mobile friendly, they just need to make some of the links bigger.

Yes exactly!! That would be all it took!

Reply on news.ycombinator.com