Html Question posted in
Some basic documentation can be found here.

email html color images changes in dark mode

On mobile devices, if dark mode is enabled, the icons change color in a strange way:

on dark mode :
enter image description here
on light mode :
enter image description here

html code :

<div class="social">
    <a target="_blank" href="https://x.com/--myaccount-here--"><img alt="x" width="auto"
            height="auto" src="https://my-app-domin/images/social/twitter-x-line.png"></a>
    <a target="_blank" href="https://www.instagram.com/--myaccount-here--/"><img alt="instagram"
            width="auto" height="auto"
            src="https://my-app-domin/images/social/instagram-line.png"></a>
</div>

Note that the original pictures are white.

Tags:

2

Answers


  1. 0

    This should help ensure that your icons retain their original colors regardless of the device’s dark mode settings.

        <style>
    .social img {
        filter: none;
        -webkit-filter: none;
    }
    
    @media (prefers-color-scheme: dark) {
        .social img {
            filter: none;
        }
    }
</style>

<div class="social">
    <a target="_blank" href="https://x.com/--myaccount-here--"><img alt="x" width="auto"
            height="auto" src="https://my-app-domin/images/social/twitter-x-line.png"></a>
    <a target="_blank" href="https://www.instagram.com/--myaccount-here--/"><img alt="instagram"
            width="auto" height="auto"
            src="https://my-app-domin/images/social/instagram-line.png"></a>
</div>

    This media query checks if the user has dark mode enabled and then applies the necessary styling to the icons.

    Login or Signup to reply.
  2. 0

    It is hard to determine the inherent issue here without knowing if you are using an email campaign manager, which operating system and which application the email are having this view in. In some cases changing your background to an extremely dark version of gray instead of black has fixed dark mode issues changing icon colors when it should not.

    If you can elaborate on if you are using a template system, which operating system or application this is occurring in I’d be happy to help further.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search