AKRABAT

As dark mode is more popular than ever now that the iPhone supports it, I’ve been working out how to get the browser to render a dark image in dark mode and a light image in light mode.

It turns out that the way to do this simply is to use the <picture> element like this:

<picture>
    <source 
        srcset="/wp-content/uploads/2019/11/example-image-dark.png"
        media="(prefers-color-scheme: dark)"
    />
    <source
        srcset="/wp-content/uploads/2019/11/example-image-light.png"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
    />
    <img src="/wp-content/uploads/2019/11/example-image-light.png" 
         alt="Description of example image here"
         class="border" loading="lazy" />
</picture>

As I use MarsEdit to write my posts, I created a Media Markup Template that does the heavy lifting:

The template looks like this:

<picture>
    <source 
        srcset="#fileurl#"
        media="(prefers-color-scheme: dark)"
    />
    <source
        srcset="#fileurl#"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
    />
    <img src="#fileurl#" loading="lazy" alt="#alttext#" class="border" width="#imgwidth#"/>
</picture>

It’s essentially the same as above, but with MarsEdit’s placeholders. I manually remove the class="border" if I don’t want a border on this image.

I can now drag an image for light mode into the MarsEdit compose window and it fills does most of the work. I then upload the dark mode image, update the URL for the first <source> element and I’m done.

If I’ve done it right, the screenshot in this post will be light or dark depending on the mode that you’re viewing this page in. Next, I need to work out how to get my syntax highlighter to honour dark mode!

Source: AKRABAT