Dark mode for HN please?

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 equally outside my expertise and my interest, so help would be welcome.

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

I took a shot at it:

https://monokai.nl/lab/hacker-news/hn-dark1.png

https://monokai.nl/lab/hacker-news/hn-dark2.png

https://monokai.nl/lab/hacker-news/hn-dark3.png

The principles I followed:

- Alligator energy. No need to redo the layout or apply the latest design trends. HN is fine as is.

- Respect the original design. The dark version uses the same color hierarchy as the elements in the original design.

- No-nonsense. All colors are pure grayscale.

- Simple. Only minimally adjusted the CSS ( https://monokai.nl/lab/hacker-news/news.css ). This can be easily implemented in the current CSS using some media queries. I only added one thing in the HTML which is a span around the karma points at the top.

- Keep the orange. This was a puzzle. I think the original bar is too jarring on a dark background. But, HN is not HN without a touch of orange. I decided to style the top links only. This keeps the soul of HN.

- Readability. You should be comfortable reading this dark mode in low light. Too much contrast doesn't read nicely, but the original HN text has a lot of contrast with its #000 on an off-white background. My dark background is off-black and the text is turned down a notch from pure white. If you need less contrast, you can turn down the brightness of your display.

- The upvote triangles are unicode now inserted via CSS. Saves a request and doesn't render pixelated on Retina.

- Best thing. All comments are placed on a big slab of #2a2a2a. That's triple the answer to you know what.

> HN should be dark mode by default

A less controversial solution would be to simply hook into the user's system-level light/dark setting: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...

That said, I've wanted this feature desperately for a long time. Browsing HN on my desktop monitor in the evening is blinding and gives me a headache. I find myself resizing the window to be phone-sized just so my eyes are assaulted with less light.

If you need a hand with the CSS, I'd be happy to write it myself (speaking of which; is HN open-source?)

Whilst touching the CSS. Could it be considered to fix the code overflow on mobile?

    It is the effect of having a line which is longer than the viewport - so we end up having to scroll that specific line. Some might say it is better not to wrap code but I more often see this as part of a quote. I you really do not like to wrap the lines then I would prefer a scrollbar on the whole section. (I hope this line demos the issues).

I am not asking for mobile CSS. It is just on mobile it is most obvious.

My CSS knowledge is severely limited but I was thinking something along the lines of

    pre {
            overflow-x: auto;
            white-space: pre-wrap;
            white-space: -moz-pre-wrap;
            white-space: -pre-wrap;
            white-space: -o-pre-wrap;
            word-wrap: break-word;
     }

Others might have better ideas. Please chime in.

I salute the credo of moving slowly. And I hate to be a cry baby. I even hate the feature creep. But here I am :-}

I wouldn't vote against the existence of a dark mode - why not make it an option - but I strongly vote against making it default. If your monitor is throwing out so much light that you're getting eye strain, you need to turn down the brightness of your monitor or phone screen.

For myself, most of the time my monitors are set to a maximum of around 30 on a scale of 100, and I don't get any eyestrain. Dark mode with a properly calibrated monitor, in contrast, does give me eye strain - the light letters on the dark background don't play well with my Keratoconus.

Right now, with HN defaults, at around 7pm, the brightness is 15, and contrast is 30.

I must have some condition (other than old age) but I cannot look at dark-themes for more than a few seconds before my eyes start hurting. I switch it to a light theme wherever possible.

Yet, I know of the popularity of dark themes. But I wonder if I'm the only one or whether there are more people that experience the same effect?

I think it gets worse when I have to switch between mostly-dark content to mostly-light content. Thus, since most pages on the web have (near-) white background, I imagine I would really suffer when switching to and from HN a lot if it were in dark mode.

But hey, maybe that would be a good thing for my productivity ;-)

I have to disagree that dark mode should the default.

It'd be fine to offer that as an option, but I'm not really seeing any reason at all why that should be default and I recall a few posts here where quite a few other's expressed they were not fans of dark mode themes.

To be fair, I never browse this or most any other web site on a phone, so, maybe apply that to phones only if that's an option.

Of all places, this is the one site that doesn't need dark mode. There are hundreds of clients. Dark reader on both chrome and Firefox. Stylish allows you to change the css to your own. This is a site for hackers. Quite literally. So hack it.

I use some hacked together uBlock Origin filters that do a fairly decent job at giving HN dark mode if you care to take it for a spin:

    ycombinator.com##html:style(background-color: #3e3e42 !important)
    ycombinator.com###hnmain:style(background-color: #2E2E31 !important)
    ycombinator.com##.age:style(color: #ccc !important)
    ycombinator.com##.c00:style(color: #ccc !important)
    ycombinator.com##.comhead > a:style(color: #dedede !important)
    ycombinator.com##.comhead:style(color: #dedede !important)
    ycombinator.com##.hnuser:style(color: #ccc !important)
    ycombinator.com##.subtext > a:link:style(color: #ccc !important)
    ycombinator.com##.subtext > a:style(color: #ccc !important)
    ycombinator.com##.subtext:style(color: #ccc !important)
    ycombinator.com##.title > a:style(color: #dedede !important)
    ycombinator.com##a:link:style(color: #ccc !important)

I don't get the appeal of dark mode. Do people really like to pretend that they're on a submarine or something?

> I don't want my eyes to burn when I'm browsing HN at night on my phone.

I've looked at HN and many other sites on my phone at night for a very long time, and never once do my eyes burn. Why is this the expectation? Use Flux or a similar light dimmer on your phone/laptop, problem solved.

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

And you can easily click to install with a browser extension like https://add0n.com/stylus.html

If you use Firefox you can use the addon Dark Reader, so you can get dark mode for every site if you want at night

This is code for an extension I run locally.

const getAttributes = () => {

  let head = document.head || document.getElementsByTagName("head")[0];

  return {
    head,
  };

};

const changeStyles = (targetElement) => {

style = document.createElement("style");

  // set style.innerHTML to darker colors, append to head
  style.type = "text/css";
  style.innerHTML = ` 
    body, #hnmain { background: #272822; }
    a.storylink, a.morelink, span.commtext { color: #fff; }
    a.storylink:visited { color: #444444; }
  `;
  targetElement.appendChild(style);

};

(function main() { const { ...attributes } = getAttributes(); changeStyles(attributes.head); })();

The majority of Desktop browsers support extensions that provide support for dark mode. On mobile I know Android Chrome (via chrome://flags) and Firefox (via extensions) support dark mode. Don't know about Safari and other mobile browsers but I feel that overall there are plenty of options for dark mode on HN without a separate site specific implementation.

I also have noticed that I never use the site specific Dark mode implementations as it is a lot more convenient to globally enable dark mode (at night) rather than playing around with toggles for every website that supports it.

For desktop, I use the refined hacker news extension (github: [0], show HN for it: [1]) which allows you to set custom CSS. It has a dark mode setting but I prefer the following CSS which makes the entire background black and the text white (Screenshot: https://imgur.com/a/2lcy1Ga):

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

Another great thing about the extension is when you go back to the same thread, it gives a little highlight to new comments that you haven't seen before so you can quickly find them. Only downside is that that doesn't work for comments after the first page.

[0]: https://github.com/plibither8/refined-hacker-news

[1]: https://news.ycombinator.com/item?id=20173974

You can enable dark mode in Chrome on Android

1. Go to chrome://flags

2. Enable "Force Dark Mode for Web Contents"

This works pretty well on all sites, not just hacker news...

For context (and also protip if you weren't aware), there's already precedent for user-defined CSS in HN. I don't remember if everyone has access to it, but there's a topcolor setting in your profile that sets the color of the top bar. Maybe that could be extended to include other CSS properties? I wouldn't mind having to write hex color codes...

Why are websites having to individually implement dark mode? It should be done heuristicly by the browser.

It would take me weeks to redo my website to support dark mode. Better to wait and let browser technology catch up.

Why not an alternate stylesheet (link rel="alternate stylesheet")? I don't know whether Chrome/ium supports it anymore, but Firefox definitely does. It would work with zero JS.

There may be third party solutions to this. The management around here is very conservative about changing things and explicitly has policies to "Move slow and preserve things" (as opposed to "Move fast and break things"). So, as a guess, the answer to that is probably "No" or, at best, "Not any time soon."

But the management is very tolerant of and even warmly welcomes the fact that the membership includes a lot of programmers and we tend to get a lot of third party solutions.

Off the top of my head, I don't know of an HN reader thingy in dark mode, but asking if those exist is much more likely to get you an immediately available solution than asking management to alter the appearance of HN in some specific way.

One of the worst mistakes of the web was putting styling in the hands of webmasters rather than users. This thread is proof that even power users have lost the ability to control their own web experience.

Here is the css that i use with Springles [1]

https://gist.github.com/kirkegaard/0d7e96bf0ebbce5ddad98e59f...

This is what it looks like: https://imgur.com/a/KsLnoC4

[1] https://getsprinkles.app

If you’re on iOS: I’ve been using the same YC reader app for over 6 years and it hasn’t been updated in over 2 years now but it still works and has had fully configurable colors schemes since as long as I can remember: https://apps.apple.com/us/app/hacker-news-yc/id713733435

Use Deluminate for dark mode on all sites!

https://chrome.google.com/webstore/detail/deluminate/iebboop...

I tried most of the "dark mode" chrome extensions out there and found this was the best (compatibility, performance, etc.). Not affiliated, just a happy user.

Just using this opportunity to rant about lack of proper APIs for accessing personal HN data like comments/favorites/upvoted.

While we're on the topic of styling, why is the default font size so small? The comment size is 12px. In my view, that's like sub/superscript or caption size, not body copy.

I regularly zoom to 150% on HN or use a bookmark that sets styles via JS so I don't have to strain while reading. Am I the only one? And no, I don't need glasses!

Please don’t change anything about this site for the love of Pete.

For desktop HN I use DarkReader[0] and for Android HN I use Materialistic[1] — both provide a superb dark-mode experience.

[0] https://darkreader.org/ | https://github.com/darkreader/darkreader

[1] https://play.google.com/store/apps/details?id=io.github.hidr... | https://github.com/hidroh/materialistic

I started using dark themes on my code editor about 8-9 years ago (Monokai on Subline IIRC) and recently I've gone back to light themes.

Light themes are certainly less cool but since you can have greater contrast they have much better readability and less strain on your eyes.

Hey guys, the "Invert color" option pretty much does the job for me on mobile.

Don't know how I can screenshot that, but it basically makes these changes: 1. Title bar remains orange (Strangely, it's not inverted) 2. Text colors which are black become white 3. The background white gets converted to black 4. Everything grey(upvote, points etc.) remains grey.

We can try that out on the website using CSS filter no? Something like

filter: invert(1); // Set based on user opt-in value

https://developer.mozilla.org/en-US/docs/Web/CSS/filter-func...

One thing I have not seen posted here in snippets is the inclusion of:

:root { color-scheme: light dark; }

This allows the browser to change the default rendering of controls like inputs and textareas. It also sets up many defaults nicely. Please use this in conjunction with @media (prefers-color-scheme: dark).

Reference: https://webkit.org/blog/8840/dark-mode-support-in-webkit/ https://drafts.csswg.org/css-color-adjust-1/#color-scheme-pr...

I agree with many of the other similar comments, having dark-mode supported by default would be good BUT we don't need it. It's already well supported by several styling extensions. I use 'Stylish' on Firefox and it works well not just on HN but quite a few sites.

https://userstyles.org/styles/22794/a-dark-hacker-news

Here's what my HN looks like - https://imgur.com/a/UM5qXtD

My attempt:

td { background-color: inherit; }

.c00 { color: #D2D2D2 !important; }

a { color: #4C709B !important; }

textarea { color: #D2D2D2 !important; background-color: #181818; }

input { color: #D2D2D2 !important; background-color: #181818; }

table { background-color: #1C1C1C; }

On my phone I find the regular site difficult to use anyways, so I go with hn.premii.com, which has a dark theme.

For those who don't mind using a bookmarklet or using something like TamperMonkey, this bit of js does a pretty good job darkening most sites:

!function(d){d.head.appendChild(d.createElement('style')).innerText='html,img,video{-webkit-filter:invert(1)hue-rotate(180deg);filter:invert(.9)hue-rotate(180deg)}body{background:#000}'}(document);

Surprised it hasn’t been mentioned yet, but I often use this reader: http://hn.premii.com/

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

It can be fully customized to whatever theme/color you prefer. I find it especially pleasant to use on my tablet - it lives on my home screen as a shortcut.

Backwards compatible (with light mode) dark mode

Preview: https://i.imgur.com/nbkPFyL.png

Source + Live Preview: https://stackblitz.com/edit/js-bgp3k5?file=style.css

Edit: updated stackblitz link, previous link was incorrect.

Here's my own dark theme userstyle for HN, with the colors from Firefox's dev tools.

For news.ycombinator.com - https://pastebin.com/K1KS64KR

For hn.algolia.com (the search form) - https://pastebin.com/ksH6QcV4

I would love it, on an iPhone there is no way to apply userstyles :/.

However, if we want to keep HN clean, but help users with closed mobile browsers, how about we add an option to add own css url in HN profile?

This way I could even create my own dark theme and have it available on all of my devices.

And then, over time, a really nice battle tested night theme can emerge from this experimentation.

An essential addition/alternative to dark mode is automatic light filtering/dimming software. There are great apps out there for both mobile and desktop that filter blue light and dim your screen according to sunrise/sunset. e.g. https://justgetflux.com/

I must say that https://apps.apple.com/us/app/hack-for-hacker-news-developer... is the best experience on iOS. Dark mode is awesome. After this app I never want to use the original web version.

> when I’m browsing HN at night on my phone

If you’re on iOS, get the MiniHack app. I’ve been using it for I-don’t-know-how-many-years and it has a dark mode. It allows me to sign on and comment, thread collapsing etc, so it’s absolutely equivalent to browsers. It’s my daily driver as far as HN is concerned.

(This comment was posted with minihack in dark mode, btw.)

Check out "Hacker News Readable Dark" for Stylus as a possible inspiration, I find it works very well.

https://userstyles.org/styles/160459/hacker-news-readable-da...

Personally, I use the Dark Reader addon on Firefox and I'm pretty happy like this.

https://addons.mozilla.org/fr/firefox/addon/darkreader/

Just use one of those CSS extensions and roll your own using HN's API: https://github.com/HackerNews/API

Also, CSS is an abomination, aesthetics have always belonged on the client side.

For universal dark mode, try this: https://chrome.google.com/webstore/detail/dark-reader/eimadp...

The absolutely most simple solution would be:

  html {
    filter: invert(0.95);
    background: rgba(9, 9, 16, .95);
  }

screenshot: https://i.imgur.com/vFko6OI.png

Other comments have good solutions but if you are accessing via mobile try out Octal. Dark theme by default, great UI/UX, complete with search, etc. I’ve been very happy with it and have tried out multiple third party clients and this has been my favorite

I've been trying HN Enhance

https://chrome.google.com/webstore/detail/hn-enhance/dmnbgmc...

Honestly since I discovered the Stylus plugin for Firefox (Stylish for other browsers) powered by https://userstyles.org/, I have dark mode everywhere and more.

Implemented a live web version using CSS Variables: https://jgthms.com/hacker-news-dark-mode/

Just use Samsung Internet forced dark mode ;)

https://telegra.ph/file/5db81368584364c580454.jpg

I added by own implementation of hacker news and it's got darkmode. https://hacker-news.garthtoland.com

A dark color scheme places different requirements on the typography so this would have to be combined with an evaluation of the typography used for inverted text.

There is an excellent app called materialistic for the phone. Its foss, works on old hardware and poor connections and It has 5 different themes to chose from.

On Chromium-based browsers, there's an experimental feature.

Search for "dark-mode" in chrome://flags.

Some browser have it integrated in regular settings already.

If you are using your phone, consider using an app to access HN. On Android, I use materialistic (available on f-Droid). It's a neat client!

You're a hacker. Write a handful of css rules if you don't like it.

At least HN is simple and consistent enough that your userstyles won't break.

Dark Reader is the best Browser Extension I've used for Darkify Every Website (It's only paid in Safari, free in Chrome and Firefox)

It works great

If you're on mobile, Kiwi Browser has "Turn on Night Mode" baked in which works pretty will for HN (except the header bar).

May I request that the dark mode be real dark, with real pixels-off black background?

Yes, the battery savings may be dismal but the comfort is really unparalleled.

Thanks!

On Chromium-based browsers, you can search for a "dark-mode" in chrome://flags

Works pretty well.

Use a mobile app client for HN instead of a web browser?

I use Materialistic on Android and its dark mode is great

I use Materialistic on Android. It has dark theme and nice widget. There is API, you know...

Dark mode for HN would be great.

I use the excellent hacker_news_night_mode addon for Firefox. It looks great.

On mobile I use Firefox and hacker_news_night_mode addon.

Yes! Why does it show up like that at night? #eyesablaze

Octal is a great iOS app for HN with a nice dark mode.

By default? No way. I like it the way it is.

no... dark mode websites kill my eyes when browsing during the day on my desktop.

what's wrong using plugins to customize the website you visit often?

HN Special Chrome Extension

You could also just have your router mitm or redirect connections to hn and sed the result.

Would be nice to have!

Yes please.

I would vote against dark by default. People in every time zone read this site at all hours of the day.

Also, how would you see the black bar when someone dies?

Here is what I've been using through the excellent Stylus browser addon. It's derived from some of the Stylus themes for HN. (comment box text is black but not being a web guy I didn't fix it):

Screenshots: https://imgur.com/a/RhesGUo

        /*Base*/
        ::selection{background: #111; color: #F60;}
        body{background-color: #222; color: #CCC;}
        a:link{color: #8AD !important;}
        a:visited{color: #666 !important;}
        a.storylink{color: #dfdfdf !important;}

        /*Font*/
        :root{font-size: 16px; text-rendering: optimizeLegibility;}
        body, td, .admin, td, .subtext, td, input[type="submit"], .default, .admin, .title, .subtext, .yclinks, .pagetop, .comhead, .comment{font-family: sans-serif;}
        body,td,input,textarea,.default,.title,.pagetop{font-size: 1rem;}
        .comment{font-size: 0.9167rem;}
        .admin, .admin td{font-size: 0.875rem;}
        .yclinks, .comhead{font-size: 0.8333rem;}
        .subtext,.subtext td, .rank, font[size="1"]{font-size: 0.75rem;}
        .rank{font-weight: bold;}

        /*Input*/
        input, textarea{background-color: #333; border: 0.0625rem solid #555; padding: 0.1875rem;}
        input[type="submit"]{background-color: #444; padding: 0.5rem 1.5rem;}

        /*Vote Arrows*/
        .votearrow{display: none;}
        a[id^="up"]:before{content: "▲"; color: #666; font-weight: bold; padding: 0.1875rem;}
        a[id^="up"].nosee:before{visibility: visible; color: #F60;}
        a[id^="down"]:before{content: "▼"; color: #666; font-weight: bold; padding: 0.1875rem;}
        a[id^="down"].nosee:before{visibility: visible; color: #369;}

        /*Spacers*/
        tr.spacer{height: 0.1875rem !important;}
        #pagespace{display: none;}

        /*Backing*/
        #hnmain{background-color: #111;}
        .itemlist{background-color: #111; width: 100%; padding: 0.1875rem;}

        /*Header Bar*/
        #hnmain > tbody > tr > td[bgcolor="#ff6600"]{position: relative; background-color: #333; border: 0.1875rem solid #111; border-bottom: none; padding: 0.1875rem;}
        #hnmain > tbody > tr > td[bgcolor="#ff6600"] a{color: #F60 !important;}
        .pagetop{color: #888;}
        #hnmain > tbody > tr > td[bgcolor="#ff6600"] td:nth-child(2){position: absolute; top: 0.375rem; width: 100%; height: 0 !important; text-align: center; margin-left: -30px; padding-left: 30px;}
        .hnname{position: absolute; left: 30; top: 0.1875rem;}

        /*Syncopation*/
        .itemlist .athing:nth-child(odd), .itemlist .athing:nth-child(odd)+tr, .athing.comtr:nth-child(odd){background-color: #1E1E1E;}
        .itemlist .athing:nth-child(even), .itemlist .athing:nth-child(even)+tr, .athing.comtr:nth-child(even){background-color: #242424;}

        /*Item*/
        .itemlist .athing td{padding-top: 0.5rem;}
        .itemlist .athing+tr td{padding-bottom: 0.5rem;}
        .itemlist .athing .title:first-child{background-color: #111; border-bottom-right-radius: 0.375rem !important; text-align: center; padding-top: 0.375rem;}

        /*Fat Item*/
        .fatitem{padding-top: 0.625rem;}
        .fatitem form{margin: 0;}
        .fatitem .votelinks{padding: 0 0.375rem;}

        /*Coments*/
        .comment-tree{width: 100%;}
        .ind{background-image: repeating-linear-gradient(to right, #111, #111 39px, #222 40px);}
        .athing.comtr td{padding: 0;}
        .athing.comtr table{border-collapse: collapse;}
        .athing.comtr .default{padding: 0.625rem 2.5rem 0.625rem 0;}
        .athing.comtr .votelinks{padding: 0.625rem;}
        .athing.comtr .comment a{color: #369 !important;}
        .athing.comtr .comment .reply a{color: #8AD !important;}
        .comment{max-width: none;}
        .comment pre{max-width: 70vw;}
        .comment pre *{font-family: monospace;}

        /*Custom*/
        .subtext .hnuser:link,
        .comhead a:link,
        .subtext a:visited {
          color: #c678ddcc !important;
        }
        .age a:link,
        .age a:visited {
        color: #98be65cc !important;
        }

        /*Comment Colors*/
        .c00{color: #dddddd;}
        .c5a{color: #cecece;}
        .c73{color: #bebebe;}
        .c82{color: #aeaeae;}
        .c88{color: #9c9c9c;}
        .c9c{color: #888888;}
        .cae{color: #828282;}
        .cbe{color: #737373;}
        .cce{color: #5a5a5a;}
        .cdd{color: #000000;}

        /*New Comments Page*/
        .athing > .default{padding: 0.625rem 2.5rem 0.625rem 0 !important;}
        .athing > .ind+.votelinks{padding: 0.625rem;}

        /*Hover*/
        .itemlist .athing:hover, .itemlist .athing:hover td, .itemlist .athing:hover+tr td{background-color: #333;}
        .itemlist .athing:hover .rank{color: #369;}
        .athing.comtr:hover{background-color: #333;}

        body > center > table {
            width: 80% !important;
        }

fdsafdsafdsa

In terms of small items that would make HN better, would it be possible make the collapse/expand buttons larger on mobile?

Because the site is so simple, it already works really well on mobile. But these tiny little buttons ruin the experience for me, and I'm sure others.

Let the bikeshedding begin!

UserContent.css

Just edit it bro...

> HN should be dark mode by default

Any science behind that claim?

Maybe spruce up the whole site too.

God no, please don’t do it. The style of HN is part of its brand. To me it’s like the craigslist of tech news. The option of a dark mode just wouldn’t feel the same, the paradox of choice would engulf you. I’ve struggled with this on every site that suddenly implements a dark mode (stack overflow!?), I’m sure others do too.

Finally! Please put a toggle/switch somewhere, preferably top right at the menu bar or down middle under the footer. No need to change the default light mode and no need to overload HN with all that cr*p frameworks. We love the existing, simple, text only, fast loading and easy to navigate site.