Member Charlie R suggested in a comment to a Tip about the new AAC site design I’m working on that it incorporate dark mode.
Initially I was skeptical because there is no consensus among web site experts that dark modes do anything useful, and I have always believed, as many web designers do, that the most readable colour scheme is good old black type on white background.
But then I read further and there are benefits to dark mode.
But, then again, none of those benefits are compelling enough to make that the default for the new design, particularly since many people hate dark modes.
What to do? Not a problem:
If you like dark mode, simply install the Night Eye extension in your browser and switch it on and off at will. I have tried it in both Safari and Chrome and it works great on AAC in either.
Yes, I could add the code to AAC to switch back and forth, but that would slow the site down. Not much it’s true, but adding code to a web site is a bit like adding weight in the ends of a boat: a bit does not hurt but a little bit here and a little bit there sure adds up.
But Night Eye only adds code at the local browser level, which is intrinsically faster, since only those who want it install it.
You can even try Night Eye for two months for free and after that it’s reasonably priced at $US9 / year.
Thanks to Charlie for the idea.
Hi John,
I usually read AAC on my iPad or iPhone. They both have dark mode available anytime I want it via a button I’ve put on the “control centre” pull down menu. It can also be set to automatic at sunset/sunrise. I use it when I want the screen to emit as little light as possible. Makes a difference, but black letters on white background is indeed what I find the best for most situations.
Adding dark mode is a real pain for small businesses to code into their web sites. Thanks for explaining Night Eye it seems like a great way to address this issue. I like your content so that’s where I want your team to be making an effort!
Hi Peter,
Agreed, particularly since our coding team is me!
You can do a dark mode using CSS media selectors which should add very little size and no loading overhead for people not using it. It hooks into whatever setting people have configured for their computer,
Of course that still means the development team (Team – ha!) still has to effectively write the theme twice, so that comes at the cost of time that could be spent on all the other things that benefit everyone. Absolutely understand that’s probably not the right tradeoff, especially before launching the new site. I can take a poke at it if you want once the new site is up (even if my front end skills have not seen a lot of use in a decade!).
On the plugins for people who want it: I can also recommend Dark Reader, which is free for Firefox/Chrome and a one time $5 for Mac/iPhone/iPad
Hi Nick,
I agree that it’s not a huge amount of code to do at the site level: a bit of Javascript to make the change, I think. But it would be quite a lot of CSS and design work given that our brand colours would not work that well on a dark background so all of that would need to be rethought.
Anyway, thanks for the offer, but I’m trying to keep this as light and maintainable as possible, so I think doing dark mode at the client side is a better bet, even in the long term.
Hi again nick,
Whoops, I misunderstood, good idea on using the media selectors. If I decide to provide the feature I will definitely look at that, much lighter. That said, I suspect, but do not know, that our users would be happier with just a large button to switch to dark mode.
Firefox users can also try the “Dark Reader” add-on, which is 100% free, and works perfectly with AAC’s new layout on both desktop and mobile.
Whatever bad blood might exist between white-on-black and black-on-white evangelists, it’s pretty hard to deny that dark mode is much easier on the battery of an OLED-equipped device. And quite a few people (me included) find it to be much easier on the eyes when ambient lighting is low.
Letting that code run browser-side, as long as the site’s own colour theme is chosen with it in mind, is a perfectly fine way to go.