FROM CACHE - en_header

Dark/Light Mode Specific Images

Blaine2045
Excursionist
18 0 8
‎11-04-2021 02:25 AM

Hello,

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

https://www.killyourgod.ai/pages/collabs

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):

<picture>
  <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?

270 Views
0 Likes
Report
Replies 2 (2)
PaulNewton
Shopify Partner
5516 500 1131
‎11-04-2021 03:12 AM

"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/

https://web.dev/prefers-color-scheme/#art-direction-with-dark-mode 

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

259 Views
0 Likes
Report
In response to PaulNewton
Blaine2045
Excursionist
18 0 8
‎11-04-2021 03:27 AM

@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.

249 Views
0 Likes
Report
Community Browser

Community Blog Articles

cropped-shutterstock_1498591895.webp
The 30-30-30 Rule: A Balanced Approach to Social Media for Startups

Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...

By Trevor Sep 20, 2023
cropped-shutterstock_1913321758.webp
How To Gain Customer Trust With Your Store’s Footer

Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...

By Skye Sep 15, 2023
shutterstock_2183225521_16x9.png
Who Are Shopify Partners?

In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...

By Imogen Sep 13, 2023
Terms of Service Privacy Policy