英文:
HTML Email - Background color issue in Outlook and other email clients
问题
I'm currently working on an HTML email and I've tested it in Litmus. The only thing that isn't working is that in Outlook and other email clients (only dark mode), the background color is being set to a strange brown shade. However, the background color should always be #1D1A1D, regardless of the light or dark mode. I've tried the following approach, but it's not working. I would appreciate any assistance.
Clients its not working: OL Office 365 120 DPI Dark, OL Office 365 Dark Windows, Outlook 2021 Dark Windows, Gmail App Dark iOS 14.2
CSS:
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background-color: #1D1A1D !important;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #1D1A1D !important;
}
}
CSS Reset:
<!DOCTYPE html>
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no"> <!-- Tell iOS not to automatically link certain text strings. -->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<style>
/* What it does: Tells the email client that only light styles are provided but the client can transform them to dark. A duplicate of meta color-scheme meta tag above. */
:root {
Color-scheme: light dark;
supported-color-schemes:light dark;
}
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background-color: #1D1A1D !important;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #1D1A1D !important;
}
}
#logo {
max-width: 120px;
margin: 3% 0 3% 3%;
float: left;
}
/* Rest of your CSS rules... */
</style>
<!-- CSS Reset : END -->
<!-- Progressive Enhancements : BEGIN -->
<style>
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td-primary:hover,
.button-a-primary:hover {
background: #555555 !important;
border-color: #555555 !important;
}
/* Media Queries */
@media screen and (max-width: 600px) {
/* Media query styles for smaller screens... */
}
</style>
<!-- Progressive Enhancements : END -->
</head>
<body>
<!-- Your email content goes here... -->
</body>
</html>
Please note that this is the translated CSS code and some HTML structure for your email. If you have further questions or need more assistance, feel free to ask.
英文:
I'm currently working on an HTML email and I've tested it in Litmus. The only thing that isn't working is that in Outlook and other email clients(only dark mode), the background color is being set to a strange brown shade. However, the background color should always be #1D1A1D, regardless of the light or dark mode. I've tried the following approach, but it's not working. I would appreciate any assistance.
Clients its not working: OL Office 365 120 DPI Dark, OL Office 365 Dark Windows, Outlook 2021 Dark Windows, Gmail App DarkiOS 14.2
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background-color: #1D1A1D !important;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #1D1A1D !important;
}
}
CSS
<!DOCTYPE html>
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<meta name="format-detection" content="telephone=no,address=no,email=no,date=no,url=no"> <!-- Tell iOS not to automatically link certain text strings. -->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<style>
/* What it does: Tells the email client that only light styles are provided but the client can transform them to dark. A duplicate of meta color-scheme meta tag above. */
:root {
Color-scheme: light dark;
supported-color-schemes:light dark;
}
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background-color: #1D1A1D !important;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #1D1A1D !important;
}
}
#logo {
max-width: 120px;
margin: 3% 0 3% 3%;
float: left;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
/* What it does: forces Samsung Android mail clients to use the entire viewport */
#MessageViewBody, #MessageWebViewDiv{
width: 100% !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Replaces default bold style. */
th {
font-weight: normal;
}
/* What it does: Fixes webkit padding issue. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
/* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */
a {
text-decoration: none;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: A work-around for email clients meddling in triggered links. */
a[x-apple-data-detectors], /* iOS */
.unstyle-auto-detected-links a,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* What it does: Prevents Gmail from changing the text color in conversation threads. */
.im {
color: inherit !important;
}
/* What it does: Prevents Gmail from displaying a download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display: none !important;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
/* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
@media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
u ~ div .email-container {
min-width: 320px !important;
}
}
/* iPhone 6, 6S, 7, 8, and X */
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
u ~ div .email-container {
min-width: 375px !important;
}
}
/* iPhone 6+, 7+, and 8+ */
@media only screen and (min-device-width: 414px) {
u ~ div .email-container {
min-width: 414px !important;
}
}
</style>
<!-- CSS Reset : END -->
<!-- Progressive Enhancements : BEGIN -->
<style>
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td-primary:hover,
.button-a-primary:hover {
background: #555555 !important;
border-color: #555555 !important;
}
/* Media Queries */
@media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
margin: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
/* What it does: Adjust typography on small screens to improve readability */
.email-container p {
font-size: 17px !important;
}
}
</style>
<!-- Progressive Enhancements : END -->
答案1
得分: 1
以下是翻译好的部分：
一些客户端不支持现代CSS属性，如背景图片、背景颜色、边距以及按钮和锚点标签，因此您需要为客户端（如Outlook）创建一个坚固的结构。以下是提供覆盖几乎所有电子邮件客户端的坚固结构的参考网站。
要了解背景，请访问此链接，
要了解按钮和链接，请访问此链接。
您将在这些链接中找到可以放入电子邮件模板的代码结果。
这些链接可以帮助您创建按钮和背景代码片段。
希望这对您有所帮助：）
PS：请尽量使用内联CSS，内联CSS更适用于电子邮件模板。
英文:
Some of the clients does not support modern CSS properties like background images, background color, margins and buttons & anchor tag, so you need to create a Bulletproof structure for clients(like outlook). Here is th reference website provides bulletproof structure that covers almost all clients for email.
for background follow this link and
for button and links follow this link
you will find this kind of code result to put in your email template
This links lets you create button and background snippets.
Hope this will help you : )
PS: Please try to use inline CSS, the inline CSS is more preferred for email templates
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论