Quick Tip - Theme Aware Images

Published ....
Last modified ....

Share this post on BlueskySee discussion on Bluesky

The other day Dan Abramov posted asking how folks have handled showing visual graphics from tools like TLDraw / Excalidraw on a webpage that uses a light and a dark theme, to which I replied with a quick tip that I have used in the past (albeit it's been a while since I've utilized this trick). I figured I'd expand a bit more on the trick here in a short blog post!

I've written a similar blog post about selecting custom favicons based on media queries, this trick works in effectively the same way but for inline images!

"The Trick"

The trick is to use the <picture> HTML element, and to use two <source>'s, one for the light theme image and the other for the dark theme image.

Example:

<picture>
  <source