CODEWITHSUNDEEP
htmlcssfrontenddarkmode
Jimi
Jimi

Reputation: 1091

HTML Mails in Dark Mode

I'm working on an email project and need to display email body in dark mode. The email body is an HTML with defined color styles. My goal is to flip the text and background color to display it in dark mode. Define a dark scheme style like this

@media (prefers-color-scheme: dark) {
    html {
        filter: invert(1) hue-rotate(180deg);
    }

    img, video {
        filter: invert(1) hue-rotate(180deg);
    }
}

After flipping the colors overall, flipping the pictures and videos back looks like the result is good. The only flaw is that this flips the colors of the emojis as well, which makes them look horrible.

enter image description here

I also tried mixing colors.

   color: white;
   mix-blend-mode: screen;

This will also brighten the colors of emojis. And it does not make black texts appear white.

It comes down to a question: How to make the following text appear in white, and keep emojis displaying normally.

<div style="color: black;">
      Hello world!  😊 😄 😭
</div>

Expected result:

enter image description here

--- Edited ---

A good example is the Apple mail app:

enter image description here

Send a mail with HTML:

<div>Test colors: </div>
<div style="color: black;">Black</div>
<div style="color: green;">Green</div>
<div style="color: red;">Red</div>
<div style="color: pink;">Pink</div>
<div style="color: blue;">Blue</div>
<div style="color: yellow;">Yellow</div>
<div style="color: gray;">Grey</div>
<div style="color: white;">White</div>
<div style="color: #8300bb;">Purple</div>

Upvotes: 1

Views: 1675

Answers (1)

corn on the cob
corn on the cob

Reputation: 2282

You should put your emojis in a span with a class of emoji. Then, in CSS, along with the body, you should invert it.

If you invert something that is inverted, it goes back to normal! :)

I think you need something like this:

html {
     background: white;
     color: black;
}

@media (prefers-color-scheme: dark) {
    html {
        filter: invert(1);
    }
    .emoji { 
        filter: invert(1); 
    }
}
<div> Hello world! 
    <span class="emoji">😊 😄 😭</span> 
</div>

Upvotes: 2

Related Questions