Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Ask HN: Dark mode for HN please?

news.ycombinator.com

Post reply on HN
Print view View original

101–110 of 469 posts

Re: Ask HN: Dark mode for HN please?

#101

Post by jedberg »

zainali wrote: post #48
dang wrote: post #32

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 , bu…

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

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

Re: Ask HN: Dark mode for HN please?

#102

Post by kohtatsu »

kohtatsu wrote: post #89
dang wrote: post #32

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 , bu…

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,…

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 (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 to #111 or so.

Re: Ask HN: Dark mode for HN please?

#103

Post by noodlesUK »

umvi wrote: post #99
jimmyswimmy wrote: post #56

Earlier quoted context omitted.

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 engin…

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

Re: Ask HN: Dark mode for HN please?

#104

Post by moonchild »

dang wrote: post #32

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 , bu…

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

Re: Ask HN: Dark mode for HN please?

#106

Post by yjftsjthsd-h »

ryan-allen wrote: post #94
_bxg1 wrote: post #8

> 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 eye…

You can stop assaulting your eyes by simply installing an extension: https://darkreader.org/ It takes 15 seconds and you will have solved your problem.

Yep, came here to suggest exactly this. Especially because then it works for all sites, not just HN. I can also second Dark Reader specifically; it's nicely tunable, supports per-site toggles, and lets you set a schedule to automatically toggle dark mode in the evening. I think my only complaint is that it might be the reason why my Firefox on Android gets really slow / hangs occasionally, although that might be unrelated; haven't gotten around to testing (and it might also be the old-ish hardware and >>100 tabs, so grain of salt).

Re: Ask HN: Dark mode for HN please?

#107

Post by blhack »

umvi wrote: post #99
jimmyswimmy wrote: post #56

Earlier quoted context omitted.

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 engin…

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.

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?

Re: Ask HN: Dark mode for HN please?

#108

Post by xingyzt »

dang wrote: post #32

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 , bu…

  @media (prefers-color-scheme:dark){body{filter:invert(1) hue-rotate(180deg)}}
One-liner inverts the brightness and preserves the orange.

Re: Ask HN: Dark mode for HN please?

#109

Post by ochoseis »

jimmyswimmy wrote: post #56
dang wrote: post #32

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 , bu…

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 engin…

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

Re: Ask HN: Dark mode for HN please?

#110

Post by Sebb767 »

dang wrote: post #39
andrewxdiamond wrote: post #35

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.

I recently changed the "expand" part to say "[N more]" when N is the number of hidden comments. Since that's much longer than "[+N]", I assume that helps? If so, we can change "[-]" to put some text in between the square brackets. In addition to being longer, that would also be nicely symmetrical. But what should the text be? "[collapse]" seems a bit too long, and also doesn't look right to me. Edit: I'm all in favor…

I've had the problem, too, and this change (the edit 2) helps a lot!

The size is not ideal, but it's easily possible to zoom if required and resizing the whole line would probably have a slew of required changes with it, so kudos for finding a minimal 80% solution ;)

Post reply on HN