Switch picture based on dark mode

[leifg]

I wrote an article that includes screenshots from a website. The website that I'm referencing also has a dark mode. I took screenshots both in dark and light mode.

Is there a way to specify in an article that I want to display a different picture based on which mode the reader currently is in?

[jpanther]

This is something that could be solved with CSS. Although the theme doesn't include a direct way to support this you should be able to use Tailwind syntax to show and hide the blocks based upon the user's display preference.

Something like the following should get the desired result:

<!-- Only visible in light appearance -->
<div class="inline dark:hidden">
  {{< figure src="image.png" >}}
</div>

<!-- Only visible in dark appearance -->
<div class="hidden dark:inline">
  {{< figure src="image.png" >}}
</div>

[jpanther]

In fact, an even cleaner approach would be to just use the class parameter on the shortcode...

{{< figure src="image.png" class="inline dark:hidden" >}}
{{< figure src="image.png" class="hidden dark:inline" >}}