how to show a particular image (using display) in dark mode on GMAIL in email templates

Question

i have the following snippet of code having two images one for light and other for dark mode. media query is not working for ios gmail app. how can i show a .img-dark when applying dark mode in ios gmail app?

@media (prefers-color-scheme: dark) {
.img-dark {
      display: inline-block !important;
    }
    .img-light {
      display: none !important;
    }
}

<img
                                      class="header-logo img-light"
                                      src="https://viwell.com/wp-content/uploads/2023/10/viwell-logo.png"
                                      alt="Viwell Logo"
                                      style="width: 284px; height: 64px"
                                      width="284"
                                      height="64" /><img
                                      class="header-logo img-dark"
                                      src="https://viwell.com/wp-content/uploads/2023/10/viwell-logo-dark.png"
                                      alt="Viwell Logo"
                                      style="
                                        width: 284px;
                                        height: 64px;
                                        display: none;
                                      "
                                      width="284"
                                      height="64"
                                  />

Answer 1

The Gmail iOS app doesn't support media queries. To show the .img-dark image in the Gmail iOS app, you need to use a different method.

One way is to use the data-src attribute to store the path to the image for dark mode. Then, you can use JavaScript to check the current viewing mode and display the appropriate image.

 data-src="https://viwell.com/wp-content/uploads/2023/10/viwell-logo-dark.png"