I am currently working on a project involving emails and I need to implement a dark mode for the email body. The email body is comprised of HTML with specific color styles defined. My objective is to change the text and background colors to create a dark mode display. To achieve this, I will define a dark scheme style as follows:
@media (prefers-color-scheme: dark) {
html {
filter: invert(1) hue-rotate(180deg);
}
img, video {
filter: invert(1) hue-rotate(180deg);
}
}
While flipping the overall colors, the pictures and videos appear satisfactory after being flipped back. However, one issue arises - emojis also undergo color inversion, resulting in an unsightly appearance.
https://i.sstatic.net/UtfDW.jpg
I attempted a solution involving color blending:
color: white;
mix-blend-mode: screen;
This method brightens emoji colors but fails to turn black texts into white.
The main question remains: How can I make the following text display in white while keeping emojis unaffected?
<div style="color: black;">
Hello world! 😊 😄 ðŸ˜
</div>
Desired outcome:
https://i.sstatic.net/cahdv.jpg
--- Edited ---
An excellent example is the Apple Mail app:
https://i.sstatic.net/X816f.jpg
When sending an email with HTML content:
<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>