Блог

Есть ли способ отключить темный режим в outlook.com и заставить оригинальные стили моего шаблона электронной почты отображаться так, как они отображаются в легком/обычном режиме ?

Во-первых, вы не можете отключить стиль (темный или светлый) с помощью css.

Что вы можете сделать в теории, так это использовать медиа-запросы (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) , чтобы определить, используется ли светлый или темный режим, и применить правила css соответственно.

Однако, поскольку вы ссылаетесь на шаблон электронной почты, насколько я знаю, поддержки медиа-запросов нет, поэтому короткий ответ-нет 🙁

Outlook имеет уникальное поведение для поддержки темного режима в электронной почте. Вы можете узнать больше здесь, если хотите. В любом случае, он используется [data-ogsc] для управления отображаемой темой: вы также можете использовать медиа-запросы, чтобы заставить ваш шаблон отображаться в настройках светлой/темной темы. Просто скопируйте и вставьте свои правила @media screen and (prefers-color-scheme: dark) ; как я уже сказал, Outlook запрашивает [data-ogsc] .darkmode селектор, чтобы сделать то же самое. Итак, как только вы создали свой шаблон light по умолчанию, вставьте его в эти скобки, и он должен работать с большинством веб-писем, включая Outlook.

Есть способ отключить темный режим в шаблонах электронной почты. Вам нужно добавить эти два мета-тега в свой HTML:

 <meta name="color-scheme" content="light">
<meta name="supported-color-schemes" content="light">
 

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

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

 <meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
@media (prefers-color-scheme: dark) {
  /* Dark mode styles */
}
</style>

 

Ваши встроенные стили останутся, но, опять же, новые почтовые клиенты смогут распознавать style и media разделы. Старые почтовые клиенты будут игнорировать его.