Ask HN: Please Dark Mode for HN

89 pointsby omot5 tahun yang lalu79 comments

Please. I instinctively go on HN all the time even when I'm in bed. I try to keep all my apps in dark mode and for the most part I've changed all my frequent apps except HN. It hurts my eyes. It hurts my soul a little bit. I like how the app hasn't changed for forever years, but please for the sake of my panache. I'll even built it myself if I could submit a PR.

82 comments

angelaguilera5 tahun yang lalu

As a workaround, I have been using Materialistic to browse HN from my Android phone. It has a nice dark theme, which I use by default.

https://github.com/hidroh/materialistic

mcjiggerlog5 tahun yang lalu

Same, it's pretty great. Unfortunately it's suffering from some bitrot and the internal browser usually works for only about 50% of the articles.

rPlayer65545 tahun yang lalu

Agreed, I have to open in the normal browser most of the time. Also if I want to see responses to my comments it doesn't show any of the context which is frustrating.

jimmySixDOF5 tahun yang lalu

Love the app but it desperately needs an update (with a search function in comment view)

iamben5 tahun yang lalu

For HN, this really could be as simple as:

html { background-color: #fff; filter: invert(1); } body > center > table > tbody > tr:first-of-type { filter: invert(1); }

Yeah, you could make micro adjustments, but that adds almost zero bloat...

skissane5 tahun yang lalu

Thought: What about a box on the user settings page in which a user can specify their own custom CSS? It would only apply when logged-in.

That means those who want dark mode can get dark mode, and those who want whatever other zany random style changes they want can get that too. (Yeah you can use an extension, but an extension isn't very friendly if you use different browsers on different devices–e.g I use Chrome on my Mac and Safari on my iPhone.)

Wikipedia has something like that:

https://en.wikipedia.org/wiki/Special:MyPage/common.css

iamben5 tahun yang lalu

I, for one, welcome my new MySpace styled HN...

Seriously though, this could be a nicely elegant solution, especially if there was "suggested CSS to do X is, paste it below" or something.

krapp5 tahun yang lalu

The Anarki forums have a similar feature, except choosing from a list of installed themes.

sam_lowry_5 tahun yang lalu

Use tampermonkey and be happy.

nallo5 tahun yang lalu

Dark mode is a "gateway feature" to more useless stuff.

enlyth5 tahun yang lalu

It's gated behind a CSS "prefers-color-scheme" media query, so it will not affect people like you in any way, who haven't opted-in to dark mode in your operating system.

Some people suffer from things like eye strain and this would improve the accessibility of the website.

[deleted]5 tahun yang lalu

rPlayer65545 tahun yang lalu

How is dark mode less useful than being able to change the color of the top bar (which is already a feature)?

mrzool5 tahun yang lalu

Dark mode is an accessibility feature.

antihero5 tahun yang lalu

No it isn't, what evidence do you have to support that?

Rochus5 tahun yang lalu

A lot of literature available, e.g.

https://pubmed.ncbi.nlm.nih.gov/28166901/

https://journals.sagepub.com/doi/abs/10.1177/001872081351550...

https://www.nngroup.com/articles/dark-mode/

krapp5 tahun yang lalu

These all appear to be studies on the effectiveness of dark mode on legibility.

Where are the studies about dark mode being a "gateway" to "useless stuff?"

Rochus5 tahun yang lalu

“dark characters on light background lead to better legibility and are strongly recommended independent of observer’s age.”

“the typically higher luminance of positive polarity displays leads to an improved perception of detail.”

"in users with normal vision, light mode leads to better performance most of the time."

So why go for dark mode if legibility, detail perception and performance is lower?

EDIT: please note that "dark characters on light background" is the contrary of dark mode; in dark mode there are light characters on dark background.

krapp5 tahun yang lalu

>So why go for dark mode if legibility, detail perception and performance is lower?

Ok you're arguing that dark mode itself is useless. I don't know enough about it to have an opinion on it one way or another, I can find sources on the web going either way.

What I'm asking for is the evidence for the slippery slope implied by "gateway" whereby Hacker News staff will be more likely to add further "useless" features simply by having added one. Assuming for the sake of argument that it is useless.

Rochus5 tahun yang lalu

> Ok you're arguing that dark mode itself is useless

I didn't say it's useless; there are use cases where dark mode is useful, e.g. "people with cataract and related disorders may perform better with dark mode" (from the Nielsen study). But it doesn't make much sense to add a feature just because it is fashionable, and not because it has a true advantage. If the people in charge of HN decided to change their site, there would be far more useful features than dark mode. I think that was the OP was referring to with "gateway to more useless stuff": if fashion and not usefulness is the number one priority, then a good product could render useless and development resources are wasted.

sneak5 tahun yang lalu

> I instinctively go on HN all the time even when I'm in bed.

You probably mean "habitually"; that's not what "instinctive" means.

omot5 tahun yang lalu

in·stinc·tive·ly

/inzˈtiNG(k)tivlē,inˈstiNG(k)tivlē/

adverb

without conscious thought; by natural instinct.

I used it correctly, the idea is that I end up on HN without thought and the bright lights surprise me.

You should've pointed out 'built', I meant 'build'.

sneak5 tahun yang lalu

There is no "natural instinct" in human beings to use HN. Nothing that is classically conditioned is an instinctive behavior.

omot5 tahun yang lalu

It’s a figure of speech.

rcarmo5 tahun yang lalu

I second this. Make it an option if there are any issues with it being a default.

My two gripes with the current HN styling are lack of dark mode and font size/text reflow. I have to constantly zoom and pan to read anything of consequence.

KoenDG5 tahun yang lalu

I use this: https://userstyles.org/styles/92693

kodah5 tahun yang lalu

I use Brave on Android and something has auto-darkmoded HN. It doesn't do this on PC but it's actually perfect.

ChrisArchitect5 tahun yang lalu

there are dark mode chrome browser plugins for this you could try

Hard_Space5 tahun yang lalu

These might help:

https://addons.mozilla.org/en-US/firefox/addon/dark-mode-web...

https://chrome.google.com/webstore/detail/dark-mode/dmghijel...

omot5 tahun yang lalu

Extensions are not the answer, they lack dignity. I want it vanilla. I also want the dark mode to carry over into any browser I'm using on mobile.

coldtea5 tahun yang lalu

>Extensions are not the answer, they lack dignity

It's amazing the kind of opinions you'll chance upon on the interwebs...

omot5 tahun yang lalu

It was kind of a joke.

pierrefermat15 tahun yang lalu

If you're on android I recommend Kiwi, if you're on iOS I recommend android.

jack_pp5 tahun yang lalu

I want you to give me all your money. I also want it in bitcoin. As soon as possible.

gerikson5 tahun yang lalu

"This is not an extension of honor."

beforeolives5 tahun yang lalu

I would recommend Dark Reader for Firefox - https://addons.mozilla.org/en-US/firefox/addon/darkreader/

seszett5 tahun yang lalu

I use in on Firefox mobile, it's great.

It's also easy to configure to get a totally black background on HN for an OLED screen.

jamil75 tahun yang lalu

I can recommend Hack if you're on iOS, I think the developer is pretty active here.

https://apps.apple.com/us/app/hack-for-hacker-news-yc/id1464...

avinassh5 tahun yang lalu

Thanks for the recommendation. Most of the comments here suggesting Chrome Extension or tamper monkey scripts, but I can’t use them on my iOS phone.

To the HN mods, dark mode is an accessibility feature. Please consider adding it

extra885 tahun yang lalu

> dark mode is an accessibility feature

The current interface has all kinds of accessibility problems, including insufficient color contrast, calling dark mode an accessibility feature isn't likely to be persuasive.

While I'm sure dark modes are helpful to some people with their disabilities, I think the expectation for accessibility should be sites robust enough to be usable when user agents automatically change colors to meet the user's needs.

busymom05 tahun yang lalu

Developer here. It's also available on MacOS and I also added post/comment reply notifications yesterday to the app. Let me know if anyone has any feedback.

impune5 tahun yang lalu

Vivaldi mobile browser can force dark mode on websites, it looks similar to what Dark Reader extension does on desktop. Works well for HN, but breaks some websites and you can only enable it globally.

olvy05 tahun yang lalu

So does the Opera mobile browser, its dark mode works very well for me when I use it, on all sites.

thrower1235 tahun yang lalu

No, please don't. I hate dark modes and all the energy wasted on making them a feature.

Fix it with some CSS if it really bothers you.

beforeolives5 tahun yang lalu

If you care about wasted energy - each person fixing it own their own is more wasted energy than one developer building the feature into the website.

nindalf5 tahun yang lalu

Look at the source of https://perfectmotherfuckingwebsite.com/. It literally takes that little effort (3 lines) to add dark mode to a simple website. HN is a bit more complex but this is a tractable problem. Let’s not talk about “all the energy wasted” like we’re asking dang to solve the Travelling Salesman problem.

[deleted]5 tahun yang lalu

thrower1235 tahun yang lalu

This is one of those kinds of things that looks simple, but turns into a land war in Asia by opening up endless bikeshedding and maintenance burden.

nindalf5 tahun yang lalu

I tried the approach on my website - blog.nindalf.com. Seems to work alright.

    /* Assume light mode by default */
    @import 'light.css' screen;

    /* Supersede with dark mode when applicable */
    @import 'dark.css' screen and (prefers-color-scheme: dark);

Raed6675 tahun yang lalu

Yes please!

Dimmed-dark mode for desktop and full-dark for OLED phones.

asdojasdosadsa5 tahun yang lalu

Here is dang's answer regarding this matter: https://news.ycombinator.com/item?id=23197966

edit: Updated comment and link to dang's answer

Operyl5 tahun yang lalu

Jeez has it been a year since that comment already? Time flies.

pudmaidai5 tahun yang lalu

Gotta love the “alligator energy” that kept approximately 10 lines of CSS from being added in the months since that comment. This isn’t rocket science

jillesvangurp5 tahun yang lalu

Open sourcing the code base might help. I'm sure there would be no shortage of pull requests to improve all sorts of things on this site that could be improved without too much effort. Plenty of more than qualified readers here. Of course that would increase dang's workload, which I can imagine is not something he's after. But he could fix that by delegating to some trusted people.

But, with a site this big, any change is going to make someone unhappy. So, I can appreciate his hands off approach here.

antihero5 tahun yang lalu

So we just need someone to take the time to re-colour news.css, and he'll pop it in there under a prefers dark css rule?

It seems a bunch of people have tried it. Some notes:

* Why have people given it a blue-ish tint? HN if anything has a warm tint. I think a neutral grey is most acceptable.

* People that are suggesting high contrast for mobile: On mobile you have a plethora of apps.

* People that are suggesting high contrast for accessibility: People with vision problems likely have some other thing to make it high contrast.

tester345 tahun yang lalu

Maybe it's hint from your body that you're consuming too much screen and in a non healthly way /s?

cblconfederate5 tahun yang lalu

select all, it's kind of a blue mode ;)

uvesten5 tahun yang lalu

Agreed! When reading late at night (in the bedroom, for example), it’s jarring to switch from a site that has proper dark mode to HN. I can understand some of the pushback, because at the start ”dark mode” felt mostly like a fad, but in low ambient light conditions, it really makes reading much easier and thus brings quite a bit of value. Of course it takes a bit of work to do it well, but that’s the case for all UX, and we don’t just ignore UX because ”ugh… work”

[deleted]5 tahun yang lalu

enahs-sf5 tahun yang lalu

As a new father reading this at 02:49pdt, I second this idea.

nullify885 tahun yang lalu

At night on mobile, I switch to Samsungs browser which has built in Dark mode. I dont use it for anything else.

sbr4645 tahun yang lalu

There's a Chrome flag to force dark mode for all websites, it does a decent job at inverting colors. I recently started using it, no plugin/extension required.

kleiba5 tahun yang lalu

What is it with you people and dark modes? I can't look at light-on-dark for longer than a few seconds before my eyes start hurting, no matter whether it's in bed or during the day.

hkh285 tahun yang lalu

This is very different for people. I have some issues with my sight causing pages that are mostly white to be painful to look at. Over time, it triggers migraines. But I know people with the opposite issue. So as an accessibility feature, websites should offer both modes.

truth_5 tahun yang lalu

I just use an Android client for HN that has AMOLED Dark Mode. Very happy with it.

ravirajx75 tahun yang lalu

I know it's not a fix but I usually try to use dark mode for all the website in chrome by using chrome's experimental flag feature { https://www.xda-developers.com/google-chrome-android-dark-mo... }. However, this feature have some side effects like improper rendering but works fine for sites like HN.

Agentlien5 tahun yang lalu

I tried this out for a while but unfortunately there were a few too many websites where the text became illegible and for many websites it simply did nothing.

ChrisMarshallNY5 tahun yang lalu

I have no issue with Dark Mode, especially at night. I don't use it for my IDE/Editor, which sometimes earns me a sneer, but otherwise, it's great.

I really like the spartan construction of HN, though, and would be sad if it started to become a "Load 1MB of bootstrapped CSS and JS chrome manipulation software before you lose that 'X' in the address bar" site.

mvanaltvorst5 tahun yang lalu

```

@media (prefers-color-scheme: dark) {

    * {

        color: #ccc;

        background: black;

    }

}

```

Really all you need for a rudimentary dark mode that automatically changes depending on your system preferences. Let's stop pretending this would take HN more than 30 minutes of dev time. Definitely would help improve accessibility.

marvinblum5 tahun yang lalu

I use HN Enhance: https://chrome.google.com/webstore/detail/hn-enhance/dmnbgmc...

ziml775 tahun yang lalu

Everyone is going to disagree about what dark HN should look like. (I already see someone asking for an OLED black variant.) Just use an app that provides a mobile-optimized presentation. And on desktop, use an extension like Dark Reader.

caution5 tahun yang lalu

I personally prefer how HN looks currently, it's simple and super quick to load. I'm not a designer, but if anyone has suggestions on how to update the css then email: [email protected].

I'm sure one of the mods would take a look there.

sneeuwpopsneeuw5 tahun yang lalu

For chrome you have a flag chrome://flags/#enable-force-dark It makes thinks dark but for my tastes the contrast is too high so I combine it with DarkReader to smooth it out more. This flag is not perfect, QR codes are for example not readable anymore by any scanner.

https://chrome.google.com/webstore/detail/dark-reader/eimadp...

solo it works also great in FF https://addons.mozilla.org/en-US/firefox/addon/darkreader/

When you open a new tab you may still get a white flash to prevent this you can use https://chrome.google.com/webstore/detail/whiteslash-white-b...

mlacks5 tahun yang lalu

On iOS I have accessibility functionality mapped to triple-clicking the lock button. I’m using a function called ‘smart invert’. I’m sure there’s something equivalent on Android.

How can you browse a site called ‘hacker news’ and have no ability to ‘hack’ your way out of a simple problem? /s haha

PostOnce5 tahun yang lalu

This is just short of asking them to increase the font size... that's an exercise left to the user.

Your browser will let you do this via user styles, plugins, user scripts, etc ad nauseam. The OS might even let you do it.

On a normal website, that might be a bit much to ask, but this is hacker news. Even so much as googling the term "dark mode" will give you a plugin that does exactly what you want.

mrzool5 tahun yang lalu

Last time this got asked about one year ago dang said they were willing to do it.[1] Several people offered to help — so much that I found reasonable to expect the feature to get shipped quickly. No idea what happened.

1: https://news.ycombinator.com/item?id=23197966

gripfx5 tahun yang lalu

I have been using the Svelte clone of HN [0] when needing dark mode. It has a toggle for dark/light and is relatively quick to use.

[0] https://hn.svelte.dev/top/1

dafman5 tahun yang lalu

Firefox for iOS has a dark mode built in, it's how I always read HN on my phone these days. The only downside is it can make some websites look very strange as it will invert a lot of the colours, but for HN it works really well

darkmuck5 tahun yang lalu

If you're on Android then Samsung Internet has a great dark mode.

gher-shyu3i5 tahun yang lalu

Try using the DarkReader plugin:

* https://addons.mozilla.org/en-US/firefox/addon/darkreader/

* https://chrome.google.com/webstore/detail/dark-reader/eimadp...

vignesh_warar5 tahun yang lalu

Not here to promote what I am building(Graha), but I wanted dark mode for hacker news for a very long time been using it like this for a couple of months

https://graha.io/edit/3njtAVYwagLy6bbtSu_vg

smolofi5 tahun yang lalu

I use the Octal app on iOS. The developer is responsive.

https://apps.apple.com/us/app/octal-for-hacker-news/id130888...