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

111–120 of 469 posts

Re: Ask HN: Dark mode for HN please?

#111

Post by moonchild »

kohtatsu wrote: post #102
kohtatsu wrote: post #89

Earlier quoted context omitted.

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

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

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

Re: Ask HN: Dark mode for HN please?

#112

Post by imperialdrive »

rsanek wrote: post #78
accelbred wrote: post #54

Earlier quoted context omitted.

That's why I use "Dark Background and Light Text". Color schemes are not as good as Dark Reader, but it doesn't noticeably affect performance.

For those initially confused (like me): this is also a Firefox extension -- https://addons.mozilla.org/en-US/firefox/addon/dark-backgrou...

This is lovely. Thank you. PS... I just switched to FF after countless years with Chrome. It was the container tabs that finally won me over, and the rest of the pros are icing on the cake. Wonderful.

Re: Ask HN: Dark mode for HN please?

#113

Post by city41 »

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…

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)

Re: Ask HN: Dark mode for HN please?

#114

Post by samstave »

dang wrote: post #69
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…

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

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

Re: Ask HN: Dark mode for HN please?

#115

Post by xwdv »

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.

Re: Ask HN: Dark mode for HN please?

#116

Post by kohtatsu »

moonchild wrote: post #111
kohtatsu wrote: post #102

Earlier quoted context omitted.

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

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.

Re: Ask HN: Dark mode for HN please?

#117

Post by ldd »

moonchild wrote: post #104
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

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

Re: Ask HN: Dark mode for HN please?

#119

Post by ldd »

kohtatsu wrote: post #102
kohtatsu wrote: post #89

Earlier quoted context omitted.

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

Did you try my latest solution?

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

let me know what you think ;D

Re: Ask HN: Dark mode for HN please?

#120

Post by thewarpaint »

lettergram wrote: post #86
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…

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

Post reply on HN