Блог

Главная - Вопросы по программированию - HTML-письма в темном режиме

HTML-письма в темном режиме

#html #css #frontend #darkmode

#HTML #css #интерфейс #темный режим

Вопрос:

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

введите описание изображения здесь

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

Комментарии:

1. Разве вы не можете просто использовать обычный CSS? @media (prefers-color-scheme: dark) { html { background: black; color: white; } }

2. Это не отменяет определение цвета в стиле. Даже если добавить тег !important , он сделает все цвета белыми. На самом деле приложение Apple mail может продолжать отображать несколько цветов в темном режиме.

3. Вы имеете в виду, что это специфическая проблема или приложение просто не позволяет вам ее изменять?

4. Поскольку HTML входящего сообщения электронной почты не контролируется, изменения могут быть внесены только на его основе. В качестве почтового приложения я могу управлять отображением HTML.

Ответ №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>