Dark mode

We recently refreshed the branding of The Mindful Dog, including a refresh of the puppy school and dog training website. Upon a refresh, there are always opportunities to start playing with new web technologies, like sass, gulp, svg,… and not so new (still a big fan of Bootstrap and its responsive grid).

But one very much new thing is system wide Dark Mode. Mojave macOS got it last year, though I’m not a big fan on the desktop, and iOS13 will get it later this year. I like some “dark mode” apps on the desktop, but having everything dark, is quite confusing, I find. On my phone though, I am already using dark everywhere I can, with plenty of apps giving you that option. On mobile you’re working with a focused single app, which makes more sense to me, as well as often reading in darkened environments, morning or evening. I was often using the triple tap accessibility feature which brings the backlight all the way down, especially in the morning.

But with an iOS13 system wide dark mode, more apps will be enabled out of the box. As will iOS13 Safari support Dark Mode websites. And I find it brilliant. Now, you could already get “Night Mode” browsing on, for example, iOS Firefox, where Firefox will flip white backgrounds to black, and black text to white, and it works quite well. But as the owner of a website you kind of loose control on how well your website works or looks. It’s an accessibility feature that everyone can enjoy, not having their eyes burned out on a dark winter morning… (but don’t forget all those other accessibility features every website should have!).

Recently, CSS got a new media query to detect if the user has set their system to use a light or dark color theme, with support in the most recent browsers, including soon to be released iOS13.

<pre class="wp-block-preformatted">@media (prefers-color-scheme: dark){}

Like doing “mobile-first”, you could decide to work “dark-first”, and use prefers-color-scheme: light as alternative. You don’t necessarily have to put in a duplicate effort, doing a whole different design (but you could!). You can get far doing the most basic things (dark background), and tweaking the font colours and navigation (especially mobile navigation), which is what I did. You should get this in place now, as when iOS13 becomes available in a couple of months and people upgrade their phone, it’s one of those tentpole features that a lot of people will switch on and try out. And they will be happily surprised seeing their favourite website supporting this. Check out the gallery below (including Firefox Night Mode).

Check out The Mindful Dog in dark mode! I hope our puppy school customers can appreciate this little detail.

• 

•