“Switching to night-mode” (sort of)

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)

Any day of coding
Unnecessary image, only here for effect…

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…

And so, happy night-moding,

3 Responses to “Switching to night-mode” (sort of)

  1. Another interesting approach, mixing the “toggle” and “completely new CSS”, but rather than having to try to override everything from the default CSS, the author cleverly adds a disabled: true to the “other” link element (check out the head to see what I mean.

  2. Found a almost work-around for the filter: invert(100%); media issue:

    @media (inverted-colors) {
      img, video { filter: invert(1); }

    Sadly. only supported in Safari at the moment…
    Found at: https://blog.logrocket.com/new-media-queries-you-need-to-know/

  3. Added as of November 16, 2021

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

    Next up, “the toggle”, some day… :-)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.