Ask HN: Dark mode for HN please? • Hacker News Board

Re: Ask HN: Dark mode for HN please?

#401

Post by frosted-flakes » Sat, May 16, 2020, 1:52 PM UTC

aasasd wrote: post #366

dang wrote: post #53

Earlier quoted context omitted.

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…

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

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.

Re: Ask HN: Dark mode for HN please?

#402

Post by globular-toast » Sat, May 16, 2020, 1:53 PM UTC

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…

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?

Re: Ask HN: Dark mode for HN please?

#403

Post by mmsimanga » Sat, May 16, 2020, 1:54 PM UTC

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.

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

Re: Ask HN: Dark mode for HN please?

#404

Post by codq » Sat, May 16, 2020, 1:55 PM UTC

agustif wrote: post #321

alpaca128 wrote: post #283

Earlier quoted context omitted.

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

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

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.

Re: Ask HN: Dark mode for HN please?

#405

Post by doomjunky » Sat, May 16, 2020, 1:56 PM UTC

zackkrida wrote: post #173

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

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/

Re: Ask HN: Dark mode for HN please?

#406

Post by cddotdotslash » Sat, May 16, 2020, 1:57 PM UTC

williamdclt wrote: post #395

0x38B wrote: post #316

Earlier quoted context omitted.

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

Re: Ask HN: Dark mode for HN please?

#407

Post by bbx » Sat, May 16, 2020, 1:58 PM UTC

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

Re: Ask HN: Dark mode for HN please?

#408

Post by niklasbuschmann » Sat, May 16, 2020, 2:05 PM UTC

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

Re: Ask HN: Dark mode for HN please?

#409

Post by mrzool » Sat, May 16, 2020, 2:07 PM UTC

kristopolous wrote: post #299

dang wrote: post #69

Earlier quoted context omitted.

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

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 )

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

Re: Ask HN: Dark mode for HN please?

#410

Post by tsbertalan » Sat, May 16, 2020, 2:10 PM UTC

graposaymaname wrote: post #231

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? Some…

Using the OS to invert the whole screen can easily be put within easy reach by keystroke or notification-area-button on Android, iOS, Windows, Mac, and Ubuntu. It doesn't require installing any new software (it's usually somewhere in "accessibility"), and, most importantly, it's consistent. When you have a "dark mode" for one site or app, it fights with the surrounding browser chrome bring light, and switching to other apps is jarring. And when you try to enable a dark UI theme in the OS, inevitably there will be elements that missed the restyling, and so retain black-on-white, or even worse, are now black-on-black.

I get that a "dark mode", done properly, requires more than just inverting colors, but this consistency is really nice.