HTML-сообщения в темном режиме

Question

Я работаю над проектом электронной почты, и мне нужно отображать тело письма в темном режиме. Тело письма представляет собой HTML-код с определенными цветовыми стилями. Моя цель - перевернуть текст и цвет фона, чтобы отобразить его в темном режиме. Определите темный стиль схемы, подобный этому

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

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

После переворота цветов в целом переворот изображений и видео выглядит как хороший результат. Единственный недостаток заключается в том, что это также меняет цвета смайликов, что делает их ужасными.

Я также пробовал смешивать цвета.

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

Это также сделает цвета смайликов ярче. И это не делает черные тексты белыми.

Все сводится к вопросу: как сделать так, чтобы следующий текст отображался белым, а смайлики отображались нормально.

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

Ожидаемый результат:

--- Отредактировано ---

Хорошим примером является почтовое приложение Apple:

Отправьте письмо с 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>

Answer 1

Вы должны объединить свои смайлики с классом смайлов. Затем в CSS вы должны инвертировать его вместе с телом.

Если вы перевернете что-то, что перевернуто, оно вернется в нормальное состояние!:)

Думаю вам нужно что-то вроде этого:

         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>