Add dark mode to your sites, or at least let the browsers do it for you | Hacker News Reader

Add dark mode to your sites, or at least let the browsers do it for you

blog.okikio.dev

57 pointssmusamashah63 comments

Ironically this site's dark mode doesn't trigger in either firefox or chromium for me.

Compare https://fishshell.com/, which I recently added a dark mode to and which does trigger in both (linux chromium needs to be started with "--force-dark-mode").

Same in iOS safari, your site works perfectly.

> Ironically this site's dark mode doesn't trigger in either firefox or chromium for me.

Nor in Safari on iOS…

the great thing about https://fishshell.com/ us it works even if you have forced dark mode flag enabled in android chrome

where as the OP site renders light

Isn't media query 'prefers-color-scheme: dark' and 'prefers-color-scheme: light' with respective color changes is all that's required?

Recently added it for https://startuptoolchain.com on request and for https://hntokindle.com on my own for functionality i.e. the kindle images switch for light/dark mode respectively.

We've gone full circle, and ended up in a worse place. From web sites using the system theme via the browser, to web sites overriding all styling, to trying to adapt to user's preferences by giving only 2 styling options.

I really think server-side styling was a mistake. It's too late now of course.

There's still hope. Reader Mode seems to be quite popular, and it could be extended until it becomes the user-styled way to view web sites.

Patreon, on mobile (Firefox on an iPhone), recently broke reader mode. How? A hidden iframe pointing at "www.googletagmanager.com"

Fuuuu

The site in TFA doesn't even have a real dark mode. Sure, it has an alternate CSS mode that makes the background darker than the text, but a real dark mode would not have a bright yellow banner spanning the top 230px of the viewport.

And the author has the audacity to complain about a site that has a light scrollbar in dark mode: 'I absolutely detest sites that "have a dark mode, BUT DON'T MAKE THE SCROLLBAR DARK!",...'

No. My website's background is blue, and if you don't like it you can leave.

I'm not that old yet but I anticipate holding this line throughout my lifecycle.

Me neither. If you wanna visit my blue website, it's live over at blog.toast.cyou

I like your blue color! Also, I feel like dark mode becomes more awkward to do if your sites uses a less traditional color scheme. I'm like you, and decided I like my desert theme and gave up on trying to do a dark theme (https://chrisbeley.com)

I can write a client side CSS that turns your website's background to red and there's nothing you can do about it.

See if I care. It's a static site, my CSS says it's blue and that's that.

I don't think anyone wants you to care, GP just reminded that your CSS can be overwritten.

I.e. earlier you wrote "if you don't like it you can leave", GP reminded that there is another option.

are you by chance a long lost relative of Larry Wall?

http://www.wall.org/~larry/

> my phone number > I hate my telephone. Please don't ask for my phone number.

This line all but confirms it

And please don't make dark mode = everything is just black. You can still have contrast in dark mode. The worst is the sites using pure white and pure black.

And Still no Dark Mode on HN [1]. Although I think this is mostly a problem on Safari where as Chrome and Firefox has workarounds like Stylish [2]. And Safari requires some paid solution via their App Store.

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

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

https://news.ycombinator.com/item?id=25697173

https://news.ycombinator.com/item?id=18178239

https://news.ycombinator.com/item?id=24621899

[2] https://userstyles.org

https://darkhn.herokuapp.com

HN is too orange, that's why the site devs have had trouble coming up with a good dark mode design for it.

It is just me or is the Stylish website unusably slow? I'm talking 5+ min page loads.

Yeah, same here. It's ridiculous slow.

And yet, thanks to Stylus[1], I have a darkmode HN: https://imgur.com/a/TayEsyS

NB: I also have an extension to run some javascript to edit some of the layout.

  [1] - https://en.wikipedia.org/wiki/Stylus_(browser_extension)

No. I hate the look of dark mode and thus choose not to publish my site with that option.

What if your users prefer the look? I presume you don't just publish your site for your own consumption

At least in my opinion, they can either put up with it or keep walking. My website is my personality on a page, and if they badly need dark mode, they can use the reader mode built into their web browser, which I make sure is properly formatted on each of my posts.

It's possible to lay down enough javascript and css on your website that reader mode doesn't work well.

It certainly is, for my personal site though I made a conscious effort to reduce js to zero and css to minimal (no bootstrap, etc.) I clock in at a 94 on web.dev, and could get that to 100 if I removed the single web font I use. It's also a hobby, and the point where the nice-to-haves of other people start creating work for me, is the point it stops being fun.

For a service or brand, it's probably a good idea to deliver a dark mode at some point (especially one that people are forced to stare at for extended periods).

My website gets a perfect score on Lighthouse - total download size without images is 7.1kB - and it supports dark mode: https://www.brandons.me/

The dark theme is 10 lines of CSS.

Yeah, it's not impossible to get good speed on dark mode; my parent suggested that reader doesn't work well if you have a ton of JS/CSS and I replied that I do not have JS and not-quite-a-lot of CSS for reasons, so reader works fine for people who want to read my site.

Your site is very minimalistic, and that is fine, because it's your site and it's what you like and it's your hobby. I'm less of a minimalistic person, so dark mode would require thought on how I would present a dark theme to users other than just coloring black and grey or white. That's too much work for me and it's personally not interesting (mostly because I do not like dark themes).

hardly anyone cares, hardly anyone is going to choose your product over a competitor's because yours has dark mode. For most companies this stuff is a distraction from the real work that matters. See also: achieving 100% lighthouse score

I personally use darkmode when I can. I for one appreciate the sites and applications that put it in. However, I am not going to pester anyone to put it in.

I can see why many would not bother. It means keeping at least 2 sets of colors going. Try putting green text on a grey background for example and you are going to have a bad time. It means making a lot of choices you already made and feel you are not going to get much out of it. I have seen many applications botch it. Thinking all you have to do is toggle the background to something dark and call it a day. It means probably means a redo of all of your art assets, and at a minimum what font colors you are using and making everything respect it.

I can theme websites but I have uninstalled Android apps in the past purely because they don't have a dark mode option.

> What if your users prefer the look?

Then they're SOL. Maybe a competitor will come along with the exact same features/pricing and a robust theming engine, then we can talk.

In Safari you can use reader mode to remove all his styling and automatically apply dark mode.

You can make the entire web “dark mode” by installing a single extension: https://darkreader.org/

I used Dark Reader for a while, but I found that it consistently messed up the contrast ratios of each site, making them significantly harder to read.

I’m not sure when you used it, but personally I’ve found it’s new “Dynamic” filter to be a significant improvement.

in the meantime, dark reader for firefox has served me well, and it works on mobile too.

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

I always end up disabling it, and I can never remember why. it works just well enough that I like it, but just badly enough I end up abandoning it every time.

It cannot be set per-site. Thus, the sites that are already in dark mode with it enabled now become bright lanterns.

Are you talking about Dark Reader? It definitely can be configured on a per-site basis. Just click on the domain name in the options page.

yea Dark Reader definitely supports per-site overrides, that was a critical feature when I was using it.

Conversely if you keep your site simple enough the user can apply styling as needed.

I don't know that a website needs a dark mode. Does anyone really not visit a website because it doesn't match their desktop color theme? That seems absurdly picky to me.

As a frequent user of dark mode, it isn't that at all. I don't care about things matching. I care about browsing in the middle of the night with the lights off and not killing my eyes. It doesn't have to be an all the time thing. It's just a matter of letting people tailor what is hitting their eyes to be appropriate to the surrounding ambient light level. Like high-end flashlights offering a red light mode. You acknowledge that it looks worse, but it also doesn't blind your users.

Thanks for clarifying.

I guess my real issue (which I forgot to mention previously) is: why is this something that the website needs to implement? Shouldn't a personal preference such as dark mode, like reader mode, be something browsers implement instead of the individual websites?

I don’t think most will outright not visit a site for not having dark mode, but it’s certainly good enough reason to avoid it and find alternatives that do have dark mode.

Agreed. It seems like a lot of people don't understand that dark mode is an accessibility issue for many people. If I couldn't use dark mode for the majority of my apps, I probably couldn't be a developer. Even with a monitor with a blue light filter and carefully adjusting the brightness and contrast to be as gentle on my eyes as possible, some days, my eyes are sensitive enough that even 15 minutes on light mode apps causes blurry vision and headaches. Dark mode I can use all day, no problem.

I suspect that dark-mode-everywhere fans turn up their monitor brightness way too high and then complain about bright mode websites.

On the other hand, people accustomed to using bright mode turn down their monitor brightness and have no issues. As a rule, the white background should not be much brighter on a monitor than a piece of paper next to it.

This often results in brightness settings between 15-20%.

> I suspect that dark-mode-everywhere fans turn up their monitor brightness way too high and then complain about bright mode websites.

This weird contrived strawman scenario is an insult to people with disabilities.

When I'm browsing on my bright desktop monitor in a dim room in the evening, and I click a link to a blinding white rgb(255,255,255) page, and reader mode doesn't work (which forces it dark), then I will sometimes click the back button to save my eyes, yes. I had to avoid HN in that situation for a while, until I got a custom stylesheet set up in Firefox.

I gave up trying to use dark themes in the browser due to the 'white flash' bug in chrome thats happened on and off for years.

here's a bug report about the issue from 2008 [0] and video of it happening from 2020 [1]. it's intolerable with dark theme stuff.

[0] https://bugs.chromium.org/p/chromium/issues/detail?id=311

[1] https://www.youtube.com/watch?v=e5sRlVwvQDE

worth the £5 or whatever I paid https://imgur.com/a/xoKlXYr

Not sure if the title is a subtle jab at HN.

I will not add dark or light mode to any site. You get one mode. Adding two is basically double the work if you want to do it right.

If you think about 10 lines of extra CSS is double the work, then I feel sorry for you son, I got 99 problems but CSS isn't one.

10 lines might be what it takes for some sites, but there are surely plenty of sites out there where it would take significantly more than that.

I always get a chuckle out of people who are entitled enough to call their opinion a PSA...

What a narrow view of the world

Reply on news.ycombinator.com