Following CSS
is in head
of HTML email to change email body color when the device in dark mode.
@media (prefers-color-scheme: dark) {
.white-cont {
background: red !important;
}
}
It turns body of email only in apple mail app. Gmail app does nothing the entire mail is converted to dark color scheme automatically which is not so good.
How to make dark-mode-responsive a gmail email? Why the above tag does not work in gmail? Any solutions?
The media query (prefers-color-scheme) is not supported by every email client. It only works with clients using WebKit as the rendering engine. As of this writing, the CSS query will work with Apple Mail, Thunderbird, and certain versions of Outlook, but Gmail does not support it.
Target Dark Mode users. If you feel comfortable digging into the CSS of your email, then adding in your own Dark Mode overrides will help you control how your email is viewed. Well, mostly. The Gmail App (iOS and Android) as well as Outlook 2019 (Windows) will ignore these styles.
In the web version of Gmail, you can choose a black background as a theme. Open Quick Settings > Theme > View All > Dark. The background will turn black, and the text will turn white and light gray, but only in the Gmail interface. Emails won't be adapted.
No color changes Some email clients let you change their UI to Dark Mode, but that doesn't have any impact on how your HTML email is rendered. Whether the app is set to Light or Dark Mode, your email will look exactly the same.
When coding a responsive email using media queries, a common technique is to create tables with align = “left” and a special class to target inside the media queries. For example, a two-column section might look like this:
I have written about prefers-reduced-motion before. The prefers-color-scheme media feature is used to detect if the user has requested the page to use a light or dark color theme. It works with the following values: light: Indicates that the user has notified the system that they prefer a page that has a light theme (dark text on light background).
If you’re looking for a way to send responsive HTML email templates or newsletters from Gmail without the help of a designer, developer or coding knowledge, you should check out ContactMonkey’s solution for sending HTML emails from Gmail.
As of Chromium 93 and Safari 15, you can adjust the color based on a media query with the media attribute of the meta theme color element. The first one that matches will be picked. For example, you could have one color for light mode and another one for dark mode.
Dark Mode is a trend in email development to present a darker color palette for email to make it more suitable in low-light environments. Dark Mode is supported by some email clients in IOS, Android OS, MacOS Mojave and newer and Outlook 2019.
With Dark Mode enabled, the email in essence inverts colors. Backgrounds that used to be white become dark (usually hexadecimal color #333, text that was dark becomes light. However, not everything swaps in a manner that is expected. Backgrounds on images and tiles remain the same, which looks ... off. To add to the issue, no two email clients are taking the same approach to present Dark Mode, so a few creative solutions need to be implemented so that emails continue to look as expected by the developer.
The bad news is that we cannot specifically target Dark Mode via CSS in email via @media
query or generated class name for Gmail or Outlook. Gmail replaces color values in the <style>
sheet and Outlook will inline Dark Mode color values and adds an !important
to them and makes it impossible to override it in the <style>
sheet.
Solution
Until Google and Microsoft offer a solution, the best approach forward is to accept this is a reality and design emails that work no matter what the background color the user chooses to view them. More users are adopting Dark Mode, so it's only going to become more popular going forward.
Good luck.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With