Dark/Light Mode Specific Images

18 0 8


I'm trying to serve specific images based on whether light or dark mode is enabled on this page:


I have this code set for the first image to test things, but it is not changing when I toggle the theme (top right corner):

  <source srcset="https://res.cloudinary.com/kyg2045/image/upload/v1636005659/COLLABS/3TEETH-LOGO-DARK_sqn487.jpg" media="(prefers-color-scheme: dark)">
  <img src="https://res.cloudinary.com/kyg2045/image/upload/v1636005653/COLLABS/3TEETH-LOGO-LIGHT_abup5a.jpg"></picture>

What would be the simplest way of accomplishing this?

Replies 2 (2)
Shopify Partner
5516 500 1131

"prefers-color-scheme: dark" is a system/software level user choice.

This is an important accessibility point: YOU do not get to override a viewers choice, you get to only know if it's set or not.

So it's used to detect a predefined preference , not for a single website to change as it wants.


Any webpage dark/light toggle just needs to be applying a class , or attributes, to the body of which there are numerous tutorials on.

The reference webpage look like it's toggle just applies the class "dark-theme" to the <body>.

Note: media query's and attributes knows nothing of classes when it comes to conditions , so an opposite "light-theme" will not trigger "light" mode media queries.

Which means any art direction of images needs to use that for an end result.


Overview https://web.dev/prefers-color-scheme/


New Feature: Automatic free shipping discounts

Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com

Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org

Defeat problems ,Learn To Ask Questions The Smart Way

18 0 8

@PaulNewton I'm sorry, but your answer is confusing.
"Which means any art direction of images needs to use that for an end result."
Use what? The "dark-theme" class? How can I differentiate to show one image when light mode is toggled and the other for when dark mode is toggled.
Can this be done purely with html, or should I be looking into javascript?
Every tutorial I've found for executing what I'm attempting thus far only gives the "prefers-color-scheme" method.