How can I prevent images from appearing black in phone's dark mode?

How can I prevent images from appearing black in phone's dark mode?

Rabi3
Excursionist
25 0 6

A picture containing black colors that has a transparent background will appear totally black on phone with dark mode theme. How can I solve this.

Replies 9 (9)

azamgill
Shopify Partner
325 47 76

Hey @Rabi3 
Can you try white or some other colour on the back of your transparent photo? you can do this with some CSS code or manually add the background colour. 

Azam Gill
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Encourage me ❤️

Come and visit us at Wbify
Rabi3
Excursionist
25 0 6

Hello.. if I add a white background it will appear white in dark mode while all the rest will be in black..

azamgill
Shopify Partner
325 47 76

Can you share your store URL, let me see and then i can suggest you a solution.

Azam Gill
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Encourage me ❤️

Come and visit us at Wbify
Rabi3
Excursionist
25 0 6

www.seby-store.com

please check the slideshow before the footer (24/7 support, satisfaction guarantee, safe & secure checkout)

azamgill
Shopify Partner
325 47 76

Thank you for sharing the URL

Your section before the footer is white and to keep it always white give it a white background color.  Does this work for you?

Azam Gill
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Encourage me ❤️

Come and visit us at Wbify
Rabi3
Excursionist
25 0 6

If the phone is not on dark mode either the transparent background or the white background will work since shopify theme background is also white.

However, in dark mode on the phone all the background will be black and this section will look white which is not consistent.

If I keep the background transparent, the black items will have a black background and will not appear anymore.

azamgill
Shopify Partner
325 47 76

got it, then for the solution you can use CSS , here is a reference 

/* For light mode */
@media (prefers-color-scheme: light) {
  .your-element {
    background-color: white; /* Set a light background color */
    color: black; /* Set a contrasting text color */
  }
}

/* For dark mode */
@media (prefers-color-scheme: dark) {
  .your-element {
    background-color: black; /* Set a dark background color */
    color: white; /* Set a contrasting text color */
  }
}
Azam Gill
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Encourage me ❤️

Come and visit us at Wbify
Rabi3
Excursionist
25 0 6

where shall I add this code?

dodders123
Visitor
1 0 0

Did you ever find out where to put the code.