A long time ago in a post far, far away, a commenter made a random suggestion:

I’m reading this awesome article at 3 pm and for future readers who want night theme.
Add body
filter: invert(100%);
and change
background-color: #212121;

When I read this, it really stuck in my bonnet; it sounded like an incredibly simple and practical solution, and yet more than 3 years later, I have still done nothing about it…

So, while trying to build up this new head of steam, I decided to tackle this relatively simple project.

Then I was reminded why the tech world is so fun/frustrating: seldom are things as simple as one might expect…

First of all, with the required CSS seemingly in hand, I had to decide how I was going to activate “night mode”…

A toggle seemed obvious, but where to put it? This site’s layout changes quite a bit across various screen sizes, which means I would need to visit all, plan, think, design… I’m tired already… Plus, a toggle would also mean that a reader would have to be momentarily blinded while trying to find the toggle, before switching it.

So then I remembered hearing about the Ambient Light Sensor API, and thought that sounded really cool: the reader would automatically get the proper day/night mode!
Then I checked CanIUse.com for this API… So, I guess “Bravo Firefox 68 for Android and all those users!”

Then I found @media (prefers-color-scheme: dark) {...}, which has considerably better support, and gets triggered because the reader at some point implied they prefer a dark mode! I’m not sure how many people are actually doing this (aside from me, I mean), but I figured, well, at least those readers could get the cool “night mode”…

So I dug in and gave it a go.

Then I was reminded once again that I work in tech, when I realized that filter is like opacity, in that it cascades down and affects all child elements, including img and video elements… And while some readers might really dig the far-out spin on things, I’m not sure it was the right look for this blog… :-/
Have a look-see (click again to go back to normal-mode)

Which means, in order to offer this “simple” feature, I would basically have to create completely new CSS for this entire site… So, maybe later?

For anyone else that is interested in trying something like this on your site (maybe you have no images or videos, or have a lot more time/patience than I have right now?), here are a few good articles to help you get started…

• Using the Ambient Light Sensor API
• Using the @media query prefers-color-scheme
• Creating a toggle, including a no-js mode and using localStorage to save the user’s preference!

And so, happy night-moding,
Atg

Top⇪