How to render different icons in an email using prefers-color-scheme Media Query?

Question

I'm trying to change icons on emails I send out through my application.

At the moment, the method I've used is to create two different set of icons, one for the light mode and one for the dark mode and set one or the other's CSS display property to none.

Like this

//for light mode
@media (prefers-color-scheme: light) {
        .icon-dark{
            display: none !important;
        }
    }

//for dark mode
@media (prefers-color-scheme: dark ) {
        .icon-light{
            display: none !important;
        }
    }

What I'm trying to ask is that is this the best method to do this? Ideally, I'd like to have only one set of icons and change it's path accordingly but using CSS only, I don't think that's possible.

What do you suggest is the best solution?

Answer 1

As stated on Litmus, they're isn't a standard at the moment as to how to handle dark mode since each email client is using a different way to handle it.

The chart below give a cheat sheet for the popular email clients (Taken from the link above).

As for the best way to handle showing different icons on different modes, using the Media Query "prefers-color-scheme" and giving the css property "display: none" to whichever element you don't want to show. It's also best to make sure you have a default style as well. (Inline style)