Recently, while working on a website built with Gatsby, Sanity CMS, and Theme-UI I noticed a need for alternate images for dark mode. Here's how I quickly built it out:

Demo:
* Toggle Darkmode on this website to see the following image change.
(top right corner desktop, bottom right mobile)

As you can see the image swaps out with a dark version of it. * The darker version of this image is an altered version of the lighter. I took this tutorial as a chance to do a little Photoshop work:)

Sanity Schema Process:

Like with most tasks in Sanity, this is quick. The schema is written up as follows:

Gatsby Component:

Sanity and Gatsby have great documentation regarding integrating images, serialization, and the basic set up between the data (Sanity) and the frontend (Gatsby). Here's an outline of the simple customizations needed to toggle your images based on Light/Dark Modes:

• Lines 2,7: Use ColorMode from theme-ui
• Line 8: Toggle images based on light/dark mode
• Line 11: Load it in place of a standard image setup