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

Shopify Discussion
1

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.

1 Like
2

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.

3

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

1 Like
4

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

5

www.seby-store.com

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

6

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?

7

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.

1 Like
8

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 */
  }
}
9

where shall I add this code?

10

Did you ever find out where to put the code.