Pooja Jain
Reputation: 21
How to force background color in gmail for Dark Mode?
I am working on HTML email templates.I am stuck with forcing background color and text color attributes for Dark mode.My normal inline css is background-color:#f2f2f2 and color:#191919.But in dark mode I want background-color:#ff5f00 and color:#ffffff.
I am able to achieve the same in outlook using @media but as said in various blogs to use blend modes for gmail,I am not able to achieve the same.Can anyone help with a HTML template or HTML code?
CODE:
<html>
<head>
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
body {
font-family: Arial;
background-color: #eee;
color: #111;
}
.Greetings_section {
background-color: #f2f2f2;
padding: 40px 20px;
}
.darkmodecustom {
background-color: #f2f2f2;
color: #191919;
padding: 5px;
}
.bg-orange {
background-color: #FF5F00;
border-color: 1px solid #ff5f00;
}
.button_text {
color: #ffffff;
}
.darkimage {
display: none;
}
a[href] {
color: #ffffff;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #111;
color: #eee;
}
.Greetings_section {
background-color: #f2f2f2;
padding: 20px 10px;
}
.darkmodecustom {
background-color: #f2f2f2;
color: #eee;
padding: 5px;
}
.bg-orange {
background-color: #FF5F00;
border-color: 1px solid #FF5F00;
}
.button_text {
color: #eee;
}
}
[data-ogsc] .body {
background-color: #111;
color: #eee;
}
[data-ogsc] .Greetings_section {
background-color: #f2f2f2;
padding: 40px 20px;
}
[data-ogsc] .darkmodecustom {
background-color: #f2f2f2;
color: white;
padding: 5px;
}
[data-ogsc] .bg-orange {
background-color: #FF5F00;
border-color: 1px solid #ff5f00;
}
[data-ogsc].button_text {
color: #eee;
}
</style>
</head>
<body class="body">
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0" style="background-color:azure;padding:10px">
<tr>
<td style="padding: 5px;">Dark mode - System (User Agent Styles)</td>
</tr>
<tr>
<td align="center" bgcolor="transparent" style="padding:0px; font-size:0px; line-height:0px;" valign="top" width="100%">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" style="padding:0; max-width:600px; font-size:0px; line-height:0px; background-color:#ffffff" width="100%">
<tr>
<td align="left" class="mobile-padding Greetings_section" style="padding:0px 24px 20px 24px; font-size:0px; line-height:0px" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" class="mobile-padding Greetings_section" style=" font-size:0px; line-height:0px;" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" class="fs14lh16 darkmodecustom" style="padding:0px 0px 8px 0px; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:20px; line-height:24px; font-weight:600; color:#191919" valign="top">
<span class="fs14lh16" style="font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:20px; line-height:24px; font-weight:600; color:#191919"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero, facilis assumenda soluta id ut labore ipsa aliquam reprehenderit</span>
</td>
</tr>
<tr>
<td align="left" style="padding:0px; font-size:0px; line-height:0px" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" class="fs12lh14 darkmodecustom" style="padding:8px 0px 0px 0px; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919" valign="top" width="15">
<span class="fs12lh14" style="font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919">•</span>
</td>
<td align="left" class="fs12lh14" style="padding:8px 0px 0px 0px; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919" valign="top">
<span class="fs12lh14" style="font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919">Lorem ipsum dolor, sit amet consectetur adipisicing elit. </span>
</td>
</tr>
<tr>
<td align="left" class="fs12lh14 darkmodecustom" style="padding:8px 0px 0px 0px; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919" valign="top" width="15">
<span class="fs12lh14" style="font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919">•</span>
</td>
<td align="left" class="fs12lh14" style="padding:8px 0px 0px 0px; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919" valign="top">
<span class="fs12lh14" style="font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; line-height:19px; font-weight:400; color:#191919">Lorem ipsum dolor, sit amet consectetur adipisicing elit. </span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" style="padding:16px 0px 0px 0px; font-size:0px; line-height:0px" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="middle">
<table border="0" cellpadding="0" cellspacing="0" class="bg-orange" width="auto">
<tr>
<!--[if (gte mso 9)|(IE)]>
<td width="20"> </td>
<![endif]-->
<td align="center" class="h32px fs12lh14 bg-orange" width="144" height="44" style="color:#191919; font-family:'Roboto', 'Helvetica Neue', Arial, 'SF Pro', 'Corbel', 'Microsoft Sans Serif', 'Segoe UI', sans-serif; font-size:16px; mso-line-height-rule:exactly; line-height:16px; font-weight:600; padding:0" valign="middle">
<a class="fs12lh14 button_text" href="#" style="text-decoration:none; display:block; padding:8px 16px 8px 16px;" target="_blank">Lorem ipsum dolor </a>
</td>
<!--[if (gte mso 9)|(IE)]>
<td width="20"> </td>
<![endif]-->
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Upvotes: 2
Views: 13542
Answers (3)
majsterka
Reputation: 23
This article helped me a lot, you should use CSS Blend Modes for text color, and for background color is linear-gradient.
Fixing Gmail’s dark mode issues with CSS Blend Modes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixing Gmail’s dark mode issues with CSS Blend Modes</title>
<style>
u + .body .gmail-blend-screen { background:#000; mix-blend-mode:screen; }
u + .body .gmail-blend-difference { background:#000; mix-blend-mode:difference; }
</style>
</head>
<body class="body">
<div style="background:#639; background-image:linear-gradient(#639,#639); color:#fff;">
<div class="gmail-blend-screen">
<div class="gmail-blend-difference">
<!-- Your content starts here -->
Lorem ipsum dolor, sit amet, consectetur adipisicing elit.
<!-- Your content ends here -->
</div>
</div>
</div>
</body>
</html>Upvotes: 0
Yug Jadvani
Reputation: 31
Gmail ignores background-color in dark mode but retains linear-gradient. Use this to lock your
<!-- For #00594E background -->
<div style="background: linear-gradient(to right, #00594E, #00594E); padding: 20px;">
Your content
</div>
<!-- For #F2CE00 text -->
<span style="background: linear-gradient(to right, #F2CE00, #F2CE00);
background-clip: text;
color: transparent;">
Text in yellow
</span>
Upvotes: 0
Tyrell Curry
Reputation: 381
I would suggest using the @media (prefers-color-scheme: dark) media query and creating a couple classes. Then apply those classes to the elements that should have the darkmode style applied.
Example:
@media (prefers-color-scheme: dark) {
.darkmode-bg {
background-color: #ff5f00 !important;
}
.darkmode-color {
color: #ffffff !important;
}
}
It's hard to answer this without code to test, but that would be what I'd suggest. Source.
It's also recommended to add these meta tags in your <head> tag to ensure that Dark Mode is enabled in your email for users that have Dark Mode turned on.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
I hope this helps!
Upvotes: 0
Related Questions
- Rust Manipulating Strings in Functions
- How to accept &str, String and &String in a single function?
- Rust - Converting from `&str` to `String` and back with Closures
- Rust Vector Mapping with Strings
- Converting a String to an &str Rust without resulting in borrowing problem
- Rust - How does String::from() actually work?
- String concatenation in rust and borrowing
- Is there any way to implement Into<&str> or From<T> for &str?
- Rust Borrow Semantics String
- How to copy or borrow a reference to, an owned String inside an owned Vec?