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

Я работаю над проектом электронной почты, и мне нужно отображать тело письма в темном режиме. Тело электронного письма представляет собой 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>

frontend html css darkmode
person Jimi    schedule 26.10.2020    source источник
comment
Разве вы не можете просто использовать обычный CSS? @media (prefers-color-scheme: dark) { html { background: black; color: white; } }   -  person Ouroborus    schedule 26.10.2020
comment
Это не отменяет определение цвета в стиле. Даже если добавить тег! Important, все цвета будут белыми. На самом деле почтовое приложение Apple может отображать несколько цветов в темном режиме.   -  person Jimi    schedule 26.10.2020
comment
Вы имеете в виду, что это проблема специфики или приложение просто не позволяет вам ее изменить?   -  person Daniel_Knights    schedule 26.10.2020
comment
Поскольку HTML-код входящего электронного письма не контролируется, изменения могут быть сделаны только на его основе. Как почтовое приложение я могу управлять отображением HTML.   -  person Jimi    schedule 26.10.2020

Ответы (1)


arrow_upward
2
arrow_downward

Вы должны объединить свои смайлы с классом смайликов. Затем в 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>

person corn on the cob    schedule 26.10.2020