Forem: Rhys Lloyd

Dimming Images for 'Dark Mode'

Rhys Lloyd — Tue, 14 Jan 2020 10:02:03 +0000

Note: This article is cross-posted from my blog: https://rhyslloyd.me/dimming-images-for-dark-mode/

When applying a "Dark Mode" theme to your website or blog, it can be challenging to determine what to do with bright images to avoid blinding your users as they navigate your site; especially when there's no logical dark alternative.

In my last post, I demonstrated a straightforward way to serve dark-mode alternative images. However, not all images have a logical dark alternative, nor does everyone have access to, skills with, or time for expensive software to convert light images to dark.

When I posted my previous article on Reddit, many Redditors suggested using CSS filters to darken images. While I do believe that the approach is valid, I do think it is a slightly-different use-case than serving completely different images. That said, I think applying CSS filters to darken images could work; so long as the user can remove the filters. "Opt-in brightness" if you will.

I wanted to explore this idea further, and try to find some approaches to apply this technique of "dimming" an image and the user toggling the "dimming" on and off.

CSS Filters for Image Dimming

There are many ways to dim images using CSS filters, the example I've provided is just one way to achieve the effect. Any specific implementation should be adjusted to match the look and feel of the site.

If you're new to CSS filters, I recommend taking a look at this article on Alligator.io which demonstrates several filters with examples of what they do.

For this example, I've chosen to reduce the image brightness and remove some colour to soften the brightness and vividness slightly.

.dim {
    filter: brightness(40%) grayscale(50%);
    transition-property: filter;

    /* Transition to "off" (dim) */
    transition-duration: 0.5s;
    transition-delay: 0.5s; /* Delay slightly */
    transition-timing-function: ease-out;
}

.dim:focus,
.dim:active {
    filter: brightness(100%) grayscale(0%);

    /* Transition to "on" (bright) */
    transition-duration: 0.1s;
    transition-delay: 0.01s; /* No delay. Set to 0.01 Because weird things happen when set to '0' */
    transition-timing-function: ease;
}

Approach #1: CSS only

Where possible, I prefer to avoid javascript (a conversation for another time); so when looking for solutions I tend to search for browser-native or CSS-only solutions first.

My first approach was to reveal the image when it is clicked and the :active pseudo-class is triggered.

Since, :active is only erm... active on mouse down, once the user releases the mouse button the image will return to it's dimmed state. The effect can be softened slightly with a slight transition delay. Adding the :focus pseudo-class also makes this approach somewhat more accessible; however, it could be a little surprising as there's no indication that the image will brighten when it receives focus.

The beauty of this approach is in its simplicity. It doesn't require any extra markup and uses just a single of pseudo-class for the effect. However, this approach completely breaks down on touch-devices, and either doesn't work or is intermittent on iOS devices (in particular) resulting in a rather infuriating experience.

Approach #2: HTML+CSS

Because the first approach doesn't effectively work on touch devices, I wanted to find a way I could get it to work (without JavaScript). To achieve this we can leverage the old-school "checkbox hack".

The "hack" here is exploiting CSS's :checked pseudo-class selector and the general sibling combinator in the form of:

input:checked ~ img {
    filter: brightness(100%) grayscale(0%);
}

...which enables us to apply different styling when the checkbox is checked.

Wrapping the image with a <label> and placing a hidden checkbox within it (creating an implicit association), we can provide a simple (somewhat accessible, assuming it's labelled correctly) toggle which actually works on touch devices.

Since we're already adding in some extra markup, let's add in a cute SVG icon to indicate to the user that the image has been dimmed deliberately and not a bug in our CSS which we were unable to achieve with the CSS-only approach.

While I do love HTML and CSS-only solutions, the most apparent issue with this approach is all the extra markup required to achieve the effect. Frankly, it would be pretty damn annoying to manually wrap images you wish to dim with all the additional markup, particularly if you're trying apply the technique to an existing site (say, for example, a blog). It would be a rather arduous task to go back through every page and/or post to apply the technique.

Approach #3: JavaScript

Recognising the impracticality of the manual HTML+CSS only approach, let's sprinkle a little JavaScript which enables us to apply the technique.

For brevity, I'll write another post (soon, I promise!) breaking down the how and why of what the JavaScript is doing.

Building on approach #2, we can apply a very similar technique. Since we're already writing JavaScript, it's (arguably) simpler for us to add the relevant click and keyboard listeners to toggle the dimming effect rather than using the "checkbox hack".

The essential advantage of the JavaScript approach is the ability to apply the technique to existing pages without necessarily needing to go back and update the markup; which means it can be applied to a website retrospectively.

Wrapping Up

With all of that said, it may not be desirable to apply the dimming technique to all images. In my next post, I'll explore a method for automatically determining image brightness so only "bright" images are dimmed.

In the meantime, reach out to me on Twitter (@justrhysism) and let me know if you've explored this idea already, and any alternative approaches you might have!

Until next time, hooroo!

Serve 'Dark Mode' Images Natively

Rhys Lloyd — Wed, 02 Oct 2019 00:16:39 +0000

Note: This article is cross-posted from my blog: https://rhyslloyd.me/serve-dark-mode-images-natively/

More and more websites, particularly technical blogs, are leveraging the prefers-color-scheme media query to provide a dark or light theme based on the user's OS preferences.

I think this is brilliant. Personally, I like to dark-mode all the things, so this works for me. That said, when it comes to images (particularly screenshots), I find a white image in a dark theme can be quite jarring. My eyes! The goggles do nothing!

What if we could present different images tailored for a user's dark (or light) preferences?

Screen capture demonstrating toggling OS dark and light modes and an image changing in a browser when the mode switch occurs.

Well, it turns out we can! Natively. That's right! No JavaScript, no CSS wizardry, just good ol' plain ol' native HTML.

"I've seen enough, gimmie the code already!"

The `prefers-color-scheme` media feature

This media feature is relatively new to browsers (landed in Firefox in May 2019) and seems to be spreading like a locust plague as those of us on the dark side clamber for some of that dark-mode goodness.

The team at MDN describe it more succinctly:

"The prefers-color-scheme CSS media feature is used to detect if the user has requested the system use a light or dark color theme."

A very basic demonstration of a prefers-color-scheme media query:

body {
    /* Default Light Scheme */
    color: black;
    background: hsl(0, 0%, 85%);
}

@media (prefers-color-scheme: dark) {
    body {
        /* Lovely moody Dark Scheme */
        color: white;
        background: hsl(0, 0%, 15%);
    }
}

The `<picture>` element

I suspect many of you may have just had the aha! moment I had a few weeks ago and figured it out. You might as well just stop reading right now and go and figure out how to extend it further 😉.

The <picture> element provides a nice native mechanism for presenting different images based on specific media queries.

A generic <picture> element example stolen verbatim from MDN:

<picture>
    <source srcset="/media/examples/surfer-240-200.jpg"
            media="(min-width: 800px)">
    <img src="/media/examples/painted-hand-298-332.jpg" />
</picture>

With your powers combined...

Combining these two very standard out-of-the-box native techniques, we can serve different images depending on a user's preferred colour scheme!

This is a bit like the first time you see sour cream and sweet chilli sauce served together with your potato wedges; at first the combination of these two simple ingredients seems a bit weird, but together it just works so well. (Oh wait, is that just us Aussies...?)

<picture>
    <source srcset="https://placehold.co/400x300/1D1E22/fff?text=Dark+mode" media="(prefers-color-scheme: dark)">
    <img src="https://placehold.co/400x300?text=Light+mode" /> 
</picture>

And a real-life example using some pleb's twitter profile; open up your OS theme toggle and switch modes to see the image change:

Inevitable caveat

Whilst playing with this technique, I quickly realised that it falls down if you've implemented a manual toggle to switch the scheme locally on your website, like the way Andy Bell describes in great detail. To see what I mean, toggle the theme on this site by clicking the sun (or moon) on the top-right of the viewport.

This is because the media query doesn't consider your local site settings (which are bespoke), nor is it possible to use CSS selectors inside a media query.

That said, I'm sure it wouldn't take much to sprinkle on a bit of magic JS dust to get it all happening. A post for another time.

TL;DR Sandbox Demo

In the meantime, check out my sandbox, open your OS scheme settings and have a play around.

Wrapping up

Sometimes the coolest little techniques are right under our noses, and are just a matter of combining a few ingredients we might not have previously thought about going together.

By combining the prefers-color-scheme media feature and the <picture> element which supports media queries, we're able to display images better suited to the user's colour-scheme preferences.

Reach out to me on twitter (@justrhysism) and let me know of the cool things you're doing with this technique, or other simple combinations with powerful results. I'd love to see them!