Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gmail's dark mode #68

Open
hteumeuleu opened this issue Oct 18, 2019 · 79 comments
Open

Gmail's dark mode #68

hteumeuleu opened this issue Oct 18, 2019 · 79 comments
Labels
Gmail Webmail, iOS and Android apps

Comments

@hteumeuleu
Copy link
Owner

hteumeuleu commented Oct 18, 2019

Here are a few tweets courtesy of email developer Gary Wesolowski.

One major issue I've seen so far affects emails that already have a dark background. These are being converted to a light theme look 馃
https://twitter.com/gj_wes/status/1185085607569231874

Netflix email being altered by Gmail's dark mode

Definitely some colour inversion filter on PNG images. Really visible on the flags in Duolingo email
https://twitter.com/gj_wes/status/1185106494687236096

Flag colors being altered by Gmail's dark mode

I still don't have the dark theme option on my account so I can't have a deeper look at this right now.

@hteumeuleu hteumeuleu added the Gmail Webmail, iOS and Android apps label Oct 18, 2019
@hteumeuleu
Copy link
Owner Author

hteumeuleu commented Nov 6, 2019

Here are a few more examples courtesy of @Sayo1337 on Slack.

Examples of accessibility issues where text in images become hard to read:

Firefox Email on Acid Creativepool

Examples where the design and branding becomes off because of the colors changing:

Quidco Really Good Emails Sainsbury's bank

@hteumeuleu
Copy link
Owner Author

hteumeuleu commented Nov 6, 2019

Here are some more examples shared by @jeffclayton on Slack.

Pizza Hut Whole Foods Market Schnuks

Quoting Jeff on Slack:

Here's another example where brand colors are actively being changed by Gmail (from red to pink). That's not okay.

Firehouse Subs

@M-J-Robbins
Copy link
Contributor

One more example for you, this one uses light text on a dark background image

image
image
image

Source email

@M-J-Robbins
Copy link
Contributor

I've also run a test to see the difference in contrast dark mode has on text.

Here's the original code

<div style="background:#000000;color:#FFFFFF;">test1</div>
<div style="background:#303030;color:#F5F5F5;">test2</div>
<div style="background:#606060;color:#D3D3D3;">test3</div>
<div style="background:#888888;color:#B0B0B0;">test4</div>
<div style="background:#B0B0B0;color:#888888;">test5</div>
<div style="background:#D3D3D3;color:#606060;">test6</div>
<div style="background:#F5F5F5;color:#303030;">test7</div>
<div style="background:#FFFFFF;color:#000000;">test8</div>

Now comparing the contrast of that to the output of Gmail and Outlook.com dark mode

Original Gmail Outlook
test1 21 16.25 21
test2 12.11 9.95 12.11
test3 4.2 4.13 3.61
test4 1.63 1.63 2.39
test5 1.63 1.63 3.63
test6 4.2 4.13 4.95
test7 12.11 9.95 8.85
test8 21 16.25 12.63

@hteumeuleu
Copy link
Owner Author

Another example from Medium.com thanks to @Sayo1337:

Pizza Hut

The Medium logo is almost invisible here.

@adrianthomas
Copy link

Has anyone figured out a way to opt out of this behaviour?

@ComputerTinker
Copy link

Running into a strange issue where Gmail (2019.11.03.280318276.release) on Android 10 (QQ1A.191205.017) seems to be completely eliminating my background texture in dark mode and using pure white instead.

Here's the email in light mode, looking pretty much as intended:
image

Here it is again in dark mode where the background texture has been substituted for pure white:
image

Here's a stripped down version of the HTML which duplicates the problem:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
  <!--[if gte mso 9]><xml>
   <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
   </o:OfficeDocumentSettings>
  </xml><![endif]-->
  <title>Watch the webcast of Handel&rsquo;s Messiah</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style type="text/css">
  body {
    margin:0;
    padding:0;
    width:100%!important;
    background-color:#020611;
  }
  </style>
</head>
<body bgcolor="#020611" style="margin:0; padding:0; width:100%!important; background-color:#020611;">

<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
  <td align="center" valign="top" bgcolor="#020611" style="background-color:#020611;">

    <table align="center" border="0" cellpadding="0" cellspacing="0" style="width:616px;" role="presentation">
    <tr>
      <td align="center" valign="top" bgcolor="#020611" background="http://image.email.bju.edu/lib/fe5b15707c6c077a7110/m/1/88295fb9-ac7f-4133-ab6e-3f85b3743111.jpg" style="background-color:#020611; background-image:url('http://image.email.bju.edu/lib/fe5b15707c6c077a7110/m/1/88295fb9-ac7f-4133-ab6e-3f85b3743111.jpg');">

        <a href="#" target="_blank"><img alt="Handel&rsquo;s Messiah" border="0" src="http://image.email.bju.edu/lib/fe5b15707c6c077a7110/m/1/f9a91d2d-a111-456f-9103-e477a4c321b2.png" width="616" height="620" style="display:block; max-width:616px;"></a>

      </td>
    </tr>
    <tr>
      <td align="center" valign="top" bgcolor="#020611" background="http://image.email.bju.edu/lib/fe5b15707c6c077a7110/m/1/88295fb9-ac7f-4133-ab6e-3f85b3743111.jpg" style="background-color:#020611; background-image:url('http://image.email.bju.edu/lib/fe5b15707c6c077a7110/m/1/88295fb9-ac7f-4133-ab6e-3f85b3743111.jpg'); padding-right:26px; padding-bottom:26px; padding-left:26px;">

        <table border="0" cellpadding="0" cellspacing="0" width="100%;" role="presentation">
        <tr>
          <td align="center" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:16px; -webkit-text-size-adjust:none; mso-line-height-rule:exactly; line-height:21px; text-align:left; color:#c3a174; font-weight:normal; -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased; padding-top:26px; padding-right:14px; padding-bottom:14px; padding-left:14px;">
            <h3 style="font-family:Helvetica, Arial, sans-serif; font-size:21px; line-height:27px; -webkit-text-size-adjust:none; mso-line-height-rule:exactly; -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased; font-weight:bold; color:#c3a174; padding:0; margin:0; vertical-align:baseline; text-align:center;">Watch the webcast of Handel&rsquo;s <em>Messiah</em></h3>
            <br/>

            Can&rsquo;t make it to the performance? Join us via webcast on Dec. 13 at 7:30 p.m. as the BJU Symphony Orchestra and combined choirs join forces to perform George Frideric Handel&rsquo;s masterwork and traditional Christmas oratorio <em>Messiah</em>.<br><br>

            The powerful three-part meditation on the prophecy and fulfillment of God&rsquo;s plan to redeem humankind through a savior concludes with the stirring &ldquo;Hallelujah&rdquo; chorus.
          </td>
        </tr>
        </table>

      </td>
    </tr>
    </table>

  </td>
</tr>
</table>

</body>
</html>

I've actually tried both JPG and PNG versions of the background, but both behave identically. I've also tried changing the bgcolor / background-color properties to see if the email would behave differently, but that does not seem to have an effect. Any help appreciated.

@ComputerTinker
Copy link

Quick update: I was able to work around the issue by using a mostly transparent 24-bit PNG background image over a solid background color. Using a transparent 8-bit PNG did not seem to work for me, it had to be 24-bit. Hope this helps someone.

@CrocodileInAWhileAlligatorLater

That has been my approach as well @ComputerTinker -> to make all emails look as best as possible for Dark Mode users I simply change the artboard backgrounds of the PSDs I receive to transparent before exporting png24, wherever possible, and in many cases the results are surprisingly nice looking against both dark & light backgrounds due to the way our designers put things together. I'm excited for developing for Dark Mode, especially excited for getting more control over dark mode with CSS.

@alejaaandro
Copy link

Branding and whole design broken and looks horrible due to Dark mode..
Please allow for more control over how things look in Dark Mode through CSS

2
1

@hteumeuleu
Copy link
Owner Author

Here's another example posted by Christie T. on the #emailgeeks Slack. The email is already dark and becomes light by default. 馃檭

An email with a dark background The same email in Gmail's dark mode with a light background

@ayalalaura
Copy link

Here's another example. Dark mode inverted the text color from white to black. The email features a dark background image on a table element (I also added a black bgcolor as a fallback on the outer table with the bg image, hoping the Gmail app would autodetect and not invert text color). Logo is also illegible.
Image from iOS (1)

@hteumeuleu
Copy link
Owner Author

I finally have a device with Android 10 so I got my hands on Gmail's dark mode. 馃帀

First thing I've tested is how images are changed. And my conclusion there is a trigger below 100px (included). If your image is smaller than 100px (width or height), its colors will be changed by Gmail. No matter if it's a PNG, GIF or JPG. No matter if your image is displayed at a smaller or larger size. And no matter if it's an <img> or a background-image.

Here's my test:

Screenshot of my test on Gmail Android 10

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Gmail Dark Mode on Android 10</title>
</head>
<body>
	<p style="width:100px; height:100px; background:url(https://www.hteumeuleu.fr/wp-content/uploads/2020/04/gmail-dark-mode/100x100.png);"></p>
	<p style="width:101px; height:101px; background:url(https://www.hteumeuleu.fr/wp-content/uploads/2020/04/gmail-dark-mode/101x101.png);"></p>
	<hr />
	<img src="https://www.hteumeuleu.fr/wp-content/uploads/2020/04/gmail-dark-mode/32x32.png" alt="" width="200" height="200" /><br />
	<img src="https://www.hteumeuleu.fr/wp-content/uploads/2020/04/gmail-dark-mode/128x128.png" alt="" width="50" height="50" /><br />
	<hr />
	<img src="https://www.hteumeuleu.fr/wp-content/uploads/2020/04/gmail-dark-mode/99x99.png" alt="" width="99" height="99" /><br />
	<img src="https://www.hteumeuleu.fr/wp-content/uploads/2020/04/gmail-dark-mode/100x100.png" alt="" width="100" height="100" /><br />
	<img src="https://www.hteumeuleu.fr/wp-content/uploads/2020/04/gmail-dark-mode/101x101.png" alt="" width="101" height="101" /><br />
	<hr />
	<img src="https://www.hteumeuleu.fr/wp-content/uploads/2020/04/gmail-dark-mode/64x64.png" alt="" width="64" height="64" /><br />
	<img src="https://www.hteumeuleu.fr/wp-content/uploads/2020/04/gmail-dark-mode/96x96.png" alt="" width="96" height="96" /><br />
	<img src="https://www.hteumeuleu.fr/wp-content/uploads/2020/04/gmail-dark-mode/128x128.png" alt="" width="128" height="128" /><br />
	<hr />
	<table border="0" cellpadding="0" cellspacing="0" role="presentation">
		<thead>
			<tr>
				<th>PNG</th>
				<th>GIF</th>
				<th>GIF*</th>
				<th>JPG</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><img src="https://www.hteumeuleu.fr/wp-content/uploads/2020/04/gmail-dark-mode/icon-facebook.png" alt="" width="42" height="42" /></td>
				<td><img src="https://www.hteumeuleu.fr/wp-content/uploads/2020/04/gmail-dark-mode/icon-facebook.gif" alt="" width="42" height="42" /></td>
				<td><img src="https://www.hteumeuleu.fr/wp-content/uploads/2020/04/gmail-dark-mode/icon-facebook-no-alpha.gif" alt="" width="42" height="42" /></td>
				<td><img src="https://www.hteumeuleu.fr/wp-content/uploads/2020/04/gmail-dark-mode/icon-facebook.jpg" alt="" width="42" height="42" /></td>
			</tr>
			<tr>
				<td><img src="https://www.hteumeuleu.fr/wp-content/uploads/2020/04/gmail-dark-mode/icon-twitter.png" alt="" width="42" height="42" /></td>
				<td><img src="https://www.hteumeuleu.fr/wp-content/uploads/2020/04/gmail-dark-mode/icon-twitter.gif" alt="" width="42" height="42" /></td>
				<td><img src="https://www.hteumeuleu.fr/wp-content/uploads/2020/04/gmail-dark-mode/icon-twitter-no-alpha.gif" alt="" width="42" height="42" /></td>
				<td><img src="https://www.hteumeuleu.fr/wp-content/uploads/2020/04/gmail-dark-mode/icon-twitter.jpg" alt="" width="42" height="42" /></td>
			</tr>
			<tr>
				<td><img src="https://www.hteumeuleu.fr/wp-content/uploads/2020/04/gmail-dark-mode/icon-whatsapp.png" alt="" width="42" height="42" /></td>
				<td><img src="https://www.hteumeuleu.fr/wp-content/uploads/2020/04/gmail-dark-mode/icon-whatsapp.gif" alt="" width="42" height="42" /></td>
				<td><img src="https://www.hteumeuleu.fr/wp-content/uploads/2020/04/gmail-dark-mode/icon-whatsapp-no-alpha.gif" alt="" width="42" height="42" /></td>
				<td><img src="https://www.hteumeuleu.fr/wp-content/uploads/2020/04/gmail-dark-mode/icon-whatsapp.jpg" alt="" width="42" height="42" /></td>
			</tr>
		</tbody>
	</table>
	<p><small>* no alpha</small></p>
</body>
</html>

@M-J-Robbins
Copy link
Contributor

Just when you thought it was starting to make sense...
I tested that same code and the images weren't changed.

Samsung S9
Android 10
Gmail version 2020.04.12.307915656

samsung S9 screenshot showing images not changed

@hteumeuleu
Copy link
Owner Author

Wow, thanks Mark. I keep thinking about this and I'm having a hard time to make any sense of it. One hypothesis I have is that maybe Google is still A/B testing on this. So different users will see different versions of a dark mode email.

One thing that makes me say this is that Chrome is also testing a forced dark mode for websites. In Chrome, if you go to chrome://flags/#enable-force-dark, you can enable the "Force Dark Mode for Web Contents" feature. After relaunching Chrome, you can try to view your emails in Chrome this way. It might not be 100% exactly what Gmail does, but it looks pretty close. And there are several "dark mode" profiles available that will change the content differently.

A screenshot of dark mode options in Chrome

With my previous test example, the "Enable with selective inversion of everything" looks exactly like what I'm seeing in Gmail on my Android device for that test email.

@hteumeuleu
Copy link
Owner Author

So鈥 I played with Gmail settings and toggled the Light theme on, and then switched by to the Dark theme. And now I no longer have my images changed on my previous example. I was thinking maybe Gmail attributes a dark mode profile when turning the settings on. So I tried to toggle it on and off a few times. But I've never been able to have the same rendering as I initially had.

@hteumeuleu
Copy link
Owner Author

Here's an example worth a laugh shared by Steven Sayo on the #emailgeeks Slack.

The original email The email seen in dark mode in Gmail

See the code of that email.

Interestingly enough, to get a similar colors on the button in Chrome's dark mode, I need to set it to "HSL-based inversion". The main image however is never changed in Chrome.

@rowdyrauxa
Copy link

I've just received an email from a contact a Google who reached out to their engineering team for a fix. This was their response:

My advice is to start using the CSS media queries for prefers-color-scheme and the meta tag for color-scheme.
WebView currently makes web content forcibly dark. 
However, we have now updated so that it can honour the media queries. 
How this works is up to the app which embeds the WebView 鈥 in this case Gmail. 
 
Gmail will be able to specify if the webview should:
- Apply force dark always
- Apply media query dark theme if available and force dark if unavailable
- Apply media query dark theme only and otherwise leave the content untouched if unavailable. 
 
The code and support for this is available in AndroidX alpha as ForceDarkStrategy and should be available today.
 
Additionally, I received the following materials from the Eng. Team about Dark Mode:
https://web.dev/color-scheme/
https://web.dev/prefers-color-scheme/
https://github.com/tomayac/dark-mode-email
 
Please let me know if you have any questions.

They said should be available today, but in my tests I'm still seeing expected breakage, no media feature support of prefers-color-scheme. I'll keep testing and see if there's something else going on.

@hteumeuleu
Copy link
Owner Author

@rowdyrauxa Thank you so much for this! So, if I understand correctly, this depends both on Gmail and on an Android 10 update (https://developer.android.com/jetpack/androidx/releases/webkit#1.3.0-alpha01)?

@rowdyrauxa
Copy link

rowdyrauxa commented May 18, 2020

@hteumeuleu I wish I could confirm, but I am having a hard time gleaning an understanding of what "should be available today" means. I'm still seeing no support of the media feature. I'll follow up and see if I can get clarity.
As of now our best solution has been to use simple background images (typographic, no real content) that are 50% opacity and live with the ruined color palette... accessibility being the primary concern.

@hteumeuleu
Copy link
Owner Author

@rowdyrauxa Thanks for your reply. I'm not seeing anything new supported as of now as well, thus my question. Let us know if you've got any other info!

@gnickygnicky
Copy link

hi all, i'm having issues mainly with background images and my content isn't visible since it's in the same color as the background.
IMG_1697
IMG_1696

@devincloudkelly
Copy link

Hey all, I'm checking out the Email on Acid dark mode webinar next week and will ask about known fixes for the gmail app specifically. Will report back, hopefully with good news. For anyone interested, here's the link to the webinar: https://marketing.emailonacid.com/webinar-designing-dark-mode-emails

@devincloudkelly
Copy link

Alright y'all, here are my updates from the Email on Acid webinar today.

I never got my questions answered directly, but did indirectly get some tips on coding for dark mode overall. I hope this of help to some of you.

I asked the following regarding gmail's dark mode:

  • How to stop gmail from inverting images, including background images (this wasn't answered)
  • How/why some emails that are already dark being converted to light in dark mode (also not answered)
  • How to stop brand colors from being changed to non-brand colors (answered for background colors, no answer for images)

Here are my two takeaways:

  1. To stop background colors changing to non-brand colors I got a hack from Annett Forcier, who is in the email geeks slack (username: emailboutique), which forces your background color. She stressed that you can still run into issues with your font changing color, potential resulting in a light-on-light contrast issue.

<style> .button { background鈥揷olor: #e6d7c0; background-image: linear-gradient(#e6d7c0, #e6d7c0); } </style>

Per Annett, this works on all email platforms except for Outlook.

  1. Not directly related to Gmail, but I found the advice to use a light gray for your font so that it is legible regardless of light/dark background really helpful.

Final notes:
Overall, the feeling was that dark mode was very much like email development in general. No standard rules, so each client had to be designed for specifically and intentionally. I have more notes/takeaways from this webinar, if anyone is interested, please let me know. I wish I had more helpful info at this time. I have followed up with Annett on twitter and will update this post if I get more info.

@BryceSalstrom
Copy link

@devincloudkelly Have you had any success with the hack from Annett? I've tried it to no avail.

@devincloudkelly
Copy link

@devincloudkelly Have you had any success with the hack from Annett? I've tried it to no avail.

@BryceSalstrom I'll be honest - I haven't tried it yet. At my company we are just dipping out toe into dark mode. Annett replied to me on twitter and asked if I had any code examples to share. I'd recommend posting your code here and I'll see if I can connect her to this thread.

@BryceSalstrom
Copy link

@devincloudkelly Thank you for your response. I was able to get the hack to work later on in the day yesterday. So, it works!! It's a great tool to have in the tool kit.

@Annett
Copy link

Annett commented Oct 28, 2020

@devincloudkelly The hack works only inline. Not in the embedded CSS styles since some email clients strip your CSS.

For example:

<table align="center" bgcolor="#e6d7c0" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;margin:0 auto;padding:0;border-spacing:0;border-radius:0px; background-color:#e6d7c0; background-image: linear-gradient(#e6d7c0,#e6d7c0);"> <tbody> <tr> <td align="left" style="border-collapse:collapse;font-family: Gilroy, 'Gilroy', sans-serif; font-size: 14px; font-weight: normal; padding:0;border:0;text-align:left;border-radius:0px;border-color: #e6d7c0 solid 2px; color:#000000;mso-padding-alt:8px 50px; background-color:#e6d7c0; background-image: linear-gradient(#e6d7c0,#e6d7c0);"><a style="text-decoration:none;color:#000000;font-family: Gilroy, 'Gilroy', sans-serif; font-size: 16px; font-weight: normal; text-align:center;border-radius:0px; font-size:16px; line-height:30px; color: #3f3f3f;" target="_blank" href="https://" class="link"><!--[if !gte mso 9]><!----><span style="padding:8px 50px;border-radius:0px;display:block"><!--<![endif]--> Shop Back in Stock <!--[if !gte mso 9]><!----> </span><!--<![endif]--> </a></td> </tr> </tbody> </table>

@hteumeuleu
Copy link
Owner Author

Google has introduced Auto Dark Theme for Chrome on Android and desktop in Chrome Canary 96: https://developer.chrome.com/blog/auto-dark-theme/

According to Andr茅 Bandarra (Developer Advocate at Google, who seems familiar with this feature):

It shares common parts with Gmail, but not exactly the same. There's a lot of work happening to improve the darkening algorithm that should be reflected in GMail too.

@Lucian2889
Copy link

Hello guys :)

I'm currently facing a challenge with some Logos in Light Mode and Dark mode.

I set custom class for Light Logo 'light-logo' and for the Dark Logo 'dark-logo' , and I'm using this code:

@media (prefers-color-scheme:dark) {
.light-logo {
display: none !important;
}
}
@media (prefers-color-scheme:light) {
.dark-logo {
display: none!important;
}
}

But it doesn't work in Gmail Clients.
I tried using the following code to target Gmail, but it still doesn't work:

@media (prefers-color-scheme:light) {
u + .body .light-logo
display: none!important;
}
}

Is there any workaround for such situations?
I know that Gmail doesn't support @media-queries, but I'm not sure if I'm missing anything else.

Thanks for taking the time to check 馃檪

@hteumeuleu
Copy link
Owner Author

@Lucian2889 As you mentioned, Gmail doesn't support (prefers-color-scheme) media queries: https://www.caniemail.com/features/css-at-media-prefers-color-scheme/ The only way you can somewhat do a bit of optimization for Gmail is by using CSS Blend Modes.

@hteumeuleu
Copy link
Owner Author

Saw this example on Reddit today.

An email from Lime Scooters made unreadable by Gmail Dark Mode. The text is light grey on a very flashy green background.

@bartsamuel
Copy link

bartsamuel commented Mar 5, 2022

Here are screenshots of dark mode email signature deployed from Gmail.com web client. Very annoying as only 2 out of 5 PNG icons are being inverted to white by Gmail. Why?! No matter what I do, neither the other icons turn white nor the two icons turn black. The other thing is that at first there were no issues, then the FB icon turned white and then the LinkedIn icon did the same...

Screenshots are from Google Pixel 3a android phone Gmail app. This issue doesn't seem to be present on iOS devices so it seems Google will only enforce this on Android.

Any ideas on how to fix this? (code below)

Screenshot_20220303-104442
Screenshot_20220302-155810
Screenshot_20220303-130752

<head>  
    
<style>
    
a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}
a:any-link {
    text-decoration: none !important;
}
    
body { font-family:Helvetica, Arial, sans-serif; font-size:80%; }
    
</style>
    
</head>

Regards,
<br><br>
Name Surname
<br><br>
<i>Title</i>
<br><br><br>
w: <a href="#" target="_blank" style="color:#000000; line-height:1.7em;">#</a>
<br>
<table cellpadding="1" cellspacing="0" border="0" style="line-height:2em;">
    <tr>
        <td>
            <a href="#" title="FB" target="_blank"><img alt="Facebook" src="/email-images/fb-centered-60px.png" width="15" height="15" style="font-family: sans-serif; color:#010101; font-size:10px; display:block; border:0px;" border="0"></a>
        </td>
        <td>&nbsp;&nbsp;</td>
        <td>
            <a href="/michael" title="Instagram" target="_blank"><img alt="Instagram" src="/email-images/instagram-60px.png" width="15" height="15" style="font-family: sans-serif; color:#010101; font-size:10px; display:block; border:0px;" border="0"></a>
        </td>
        <td>&nbsp;&nbsp;</td>
        <td>
            <a href="#" title="LinkedIn" target="_blank"><img alt="LinkedIn" src="/email-images/linkedin-60px.png" width="15" height="15" style="font-family: sans-serif; color:#010101; font-size:10px; display:block; border:0px;" border="0"></a>
        </td>
        <td>&nbsp;&nbsp;</td>
        <td>
            <a href="#" title="YouTube" target="_blank"><img alt="YouTube" src="/email-images/youtube-60px.png" width="15" height="15" style="font-family: sans-serif; color:#010101; font-size:10px; display:block; border:0px;" border="0"></a>
        </td>
        <td>&nbsp;&nbsp;</td>
        <td>
            <a href="#" title="Amazon" target="_blank"><img alt="Amazon" src="/email-images/amazon-60px.png" width="15" height="15" style="font-family: sans-serif; color:#010101; font-size:10px; display:block; border:0px;" border="0"></a>
        </td>
    </tr>
</table>
    
<br><br>

<span style="font-size:x-small;">As featured in:</span>
<br><br>

<img alt="BBC Sky The Times Forbes The Telegraph The Observer" src="/email-images/michael-media-logos-980x50px.png" width="490" height="25" style="font-family: sans-serif; color:#000000; font-size:20px; display:block; border:0px;" border="0">

<br>
<div style="color:#000000; font-size:x-small;">Michael Ltd, Company Number 1111, VAT 1111, Registered office: <a href="#" style="text-decoration:none!important; color:#010101!important; border:none!important;" x-apple-data-detectors="false">33 Street, 43440, New York</a></div>

<br><br>

@martinssen
Copy link

martinssen commented Mar 24, 2022

Hi all!

Thanks to @hteumeuleu article about this Gmail error, I've come up with another solution for keeping your text in the color that works for your design and also for accessibility.

Try to use background-clip: text; and define your text color as background-image:linear-gradient(#000,#000);.

background-clip: text; has similar support as mix-blend-mode

Cheers,
Martin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixing Gmail鈥檚 dark mode issue</title>
    <style>
          .body { font-size:50px; }
           u + .body .gmail-take-this { background-image:linear-gradient(#000,#000); background-clip: text; color: transparent; }
    </style>
</head>
<body class="body">
    
    <div style="background-image:linear-gradient(#fff4b9,#fff4b9); ">
    <div class="gmail-take-this">
      This is my text
    </div>
    </div>
    
</body>
</html>

@chris167
Copy link

chris167 commented May 1, 2022

Is there anyone who know if we could use the workaround provided by @hteumeuleu here using MJML framework?

The dark mode is really affecting the accessibility / readability of the text and given that a lot of consumers (target recipients of the emails) are using gmail ios / android apps, I think our emails can only be read half the time (before night falls!) 炉_(銉)_/炉

@Nicole-Hickman
Copy link

Nicole-Hickman commented May 2, 2022

@chris167 I've used it successfully within MJML. You just need to include the classes in your mj-style section, and then change the body to be class="body" in the HTML in order for it to work properly.

@oleg-lunia
Copy link

<div class="main_link">
        <a href="" target="_blank">tekst</a>
</div>

scss:

.main_link {
   display: block;
   height: 50px;
   background-image: linear-gradient(270deg, #4B64FF 0.44%, #3031B9 99.56%);
   border: 3px solid rgba(255, 255, 255, 0.5);
   box-shadow: 2px 0px 7px rgba(0, 0, 0, 0.15);
   border-radius: 16px;
   margin-left: 20px;
   margin-right: 20px;
   text-align: center;
   letter-spacing: 0.41px;
   margin-top: 20px;
   margin-bottom: 20px;

   a {
     font-weight: 700;
     font-size: 16px;
     line-height: 50px;
   }
 }

@media (max-width: 599px) {
 .main_link a {
         background-image:linear-gradient(#FFD400,#FFD400) !important;
         background-clip: text !important;
         color: transparent !important;
         -webkit-background-clip: text !important;
         -webkit-text-fill-color: transparent !important;
       }
}

@media (min-width: 600px) {
 .main_link a {
         color: #FFD400 !important;
       }
}

for me it worked!)

@gfrassetti
Copy link

@Lucian2889Como mencion贸, Gmail no admite (prefers-color-scheme)consultas de medios: https://www.caniemail.com/features/css-at-media-prefers-color-scheme/ La 煤nica forma en que puede hacer un poco de optimizaci贸n para Gmail es mediante el uso de modos de fusi贸n CSS .

Hey Bro, How are you? Can you help me? I have to make a white background.. but it's impossible to me, I've tried with the blend mode method.. but nothing, how should I implement it right?

@joaovflorisvaldo
Copy link

joaovflorisvaldo commented Aug 29, 2022

@gfrassetti hey bro, from what I've been researching, putting background: FFF doesn't work, gmail always changes the background, a jury-rigged I did to put an image with a solid grayish white background

@Lucian2889Como mencion贸, Gmail no admite (prefers-color-scheme)consultas de medios: https://www.caniemail.com/features/css-at-media-prefers-color-scheme/ La 煤nica forma en que puede hacer un poco de optimizaci贸n para Gmail es mediante el uso de modos de fusi贸n CSS .

Hey Bro, How are you? Can you help me? I have to make a white background.. but it's impossible to me, I've tried with the blend mode method.. but nothing, how should I implement it right?

@TaxiTweedy
Copy link

Google's own emails getting the dark mode treatment makes me laugh.....
image

And this email from Xbox/Microsoft (For an image heavy email, it looks great in light mode but gets butchered by Google's Dark mode)

image

@jacobraccuia
Copy link

Hopping in here to update. I've tried a bit of @hteumeuleu's code in various tests and I'm not able to get the white color of the text to work. It clearly DOES apply to the backgrounds, but not the text color itself. See attached image.

I used the code directly from the fix: https://lab.hteumeuleu.com/dark-mode-blend/

I'm on iOS 16.0.2, iPhone 14 pro, using the Gmail IOS App, with dark mode enabled. Maybe I missed something and it never works this way, or a new update has stopped these modes from working.

Anyways, all ears if someone has a solution. I am at a complete loss :) Thanks everyone for your help here!

IMG_DA4F7B52B92B-1

@coltoneakins
Copy link

@jacobraccuia

Could you screenshot a snippet of the HTML code of this email opened up on Gmail desktop? I want to make sure that the CSS classes for the blend mode hack are applied properly to your text.

Also, if you are using an ESP (email sending platform, maybe through your work?) to send these emails, sometimes the ESP can mess with the CSS when the email is sent.

At my work, we are actively using this technique daily---and we have been testing on the latest iPhone (iPhone 14) with the Gmail iOS app, so I am 99% sure there is not an 'update' that has suddenly stopped this from working.

@jacobraccuia
Copy link

thanks @coltoneakins for the quick reply.

You did help me immensely, thank you. I never considered that my mail client Airmail was messing things up. I tried to send it using Mailchimp template editor and it seemed to work perfectly this time, with the text showing up white.

Sorry everyone for any panic or extra testing I may have caused :)

@greyskin
Copy link

greyskin commented Jun 6, 2023

I'm on iOS 16.3, in Dark Mode, using the Gmail app and am not using an ESP. I am copying @hteumeuleu's code into Gmail as per the steps below. Like @jacobraccuia, I am experiencing the background colours working but not the white text.

Steps to reproduce (using Chrome on Win 10):

  1. Open the link above
  2. Right-click and select Inspect to open Chrome Developer Tools
  3. Right-click on the html element and select Copy > Copy element
  4. Open mail.google.com
  5. Open the Compose window
  6. Right-click in the message area and click Inspect to open Chrome Developer Tools
  7. Right-click the div with class "editable" and select Edit as HTML
  8. Add <!DOCTYPE html>
  9. Paste the previously copied code
  10. Send

I haven't had any issues sending HTML email this way in the past, but perhaps there is something I'm unaware of that means that this method won't work for the dark mode fix?

@greyskin
Copy link

greyskin commented Jun 6, 2023

Ah, I see the issue. I'd forgotten that using the above method requires all styling to be inline as Gmail will strip out the head element. Once I converted the classes to inline styling it worked perfectly. Leaving this here (instead of deleting) in case anyone else makes the same mistake as I.

@Rodrigo-Garci
Copy link

Hello everyone

So im trying to make work an email on dark mode as stated by @hteumeuleu. However, before starting working on it tried to see if it was feasible but here's how it looks on my Pixel 6.
Screenshot_20230706-141612
Shouldn't this work only by copy and paste it? Havent touched anything on it yet, wanted to try it since i saw couple of you that actually worked (prob not as expected)
Any recommendation? Ty in advance.

@coltoneakins
Copy link

@Rodrigo-Garci

How did you send the email to yourself? Are you using an Email Sending Platform (ESP)? The HTML or CSS of the email may be being 'messed with' by the platform you chose to send the email with...

@joaovflorisvaldo
Copy link

To design an email layout that's suitable for dark mode, it's important to consider some best practices, such as:
a) Use contrasting colors to ensure readability of content on dark backgrounds.
b) Avoid relying solely on images to convey important information as they may not be visible or not stand out properly in dark mode.
c) Test your emails on different email clients and devices to ensure they display correctly in both dark and light mode.
Using custom CSS is one of the ways to adapt your email layout to dark mode. CSS can be used to adjust background colors, text colors, and other elements to ensure the email is visually pleasing in low-light reading environments.
Support link explaining ('https://www.campaignmonitor.com/resources/guides/dark-mode-in-email/')

@aOpenbrier
Copy link

@Rodrigo-Garci

Tested this today and Gmail for Android will darken a linear-gradient the same as a background-color, if it contains any color it calculates to be bright. Affects colors between yellow and cyan more but eventually all colors when they near white.

This may break the dark mode fix that uses blend modes https://www.hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes/ for many colors
Also I just found Gmail for Android only recognizes linear-gradient from the style block, it will ignore it as an inline style

Pixel 8 Pro:
Screenshot_20240129-195113

Screenshot_20240129-200950

Gmail for iOS isn't affected

@dhiren-eng
Copy link

dhiren-eng commented Apr 26, 2024

Alright y'all, here are my updates from the Email on Acid webinar today.

I never got my questions answered directly, but did indirectly get some tips on coding for dark mode overall. I hope this of help to some of you.

I asked the following regarding gmail's dark mode:

  • How to stop gmail from inverting images, including background images (this wasn't answered)
  • How/why some emails that are already dark being converted to light in dark mode (also not answered)
  • How to stop brand colors from being changed to non-brand colors (answered for background colors, no answer for images)

Here are my two takeaways:

  1. To stop background colors changing to non-brand colors I got a hack from Annett Forcier, who is in the email geeks slack (username: emailboutique), which forces your background color. She stressed that you can still run into issues with your font changing color, potential resulting in a light-on-light contrast issue.

<style> .button { background鈥揷olor: #e6d7c0; background-image: linear-gradient(#e6d7c0, #e6d7c0); } </style>

Per Annett, this works on all email platforms except for Outlook.

  1. Not directly related to Gmail, but I found the advice to use a light gray for your font so that it is legible regardless of light/dark background really helpful.

Final notes: Overall, the feeling was that dark mode was very much like email development in general. No standard rules, so each client had to be designed for specifically and intentionally. I have more notes/takeaways from this webinar, if anyone is interested, please let me know. I wish I had more helpful info at this time. I have followed up with Annett on twitter and will update this post if I get more info.

Annett Forcier is not working for keeping the button background white in dark mode (of android gmail). The button background is changing to black even after applying <style> .button { background鈥揷olor: #FFFFFF; background-image: linear-gradient(#FFFFFF, #FFFFFF); } </style>

In light mode, it's looking like below as expected i.e. with white background:
image

In dark mode the expectation is to have white background but it is changing to black even after using above code. Same border color as light mode has been achieved using outline css style instead of border:
image

Also not sure how to change the text color to blue (same as border color) from purple in dark mode.

Any solution for this would be very much appreciated !

@jkupczaknoauth
Copy link

Maybe I'm doing something wrong. But I've copied your code exactly and tested it in Gmail on Android. In Dark mode there is no background color on the button at all. If I'm reading the code correctly it seems like you're declaring a background image and then immediately removing it too.

@Art-Korolev
Copy link

Art-Korolev commented May 20, 2024

Maybe I'm doing something wrong. But I've copied your code exactly and tested it in Gmail on Android. In Dark mode there is no background color on the button at all. If I'm reading the code correctly it seems like you're declaring a background image and then immediately removing it too.

take a screen, dot't have android phone, only iphone

@jkupczaknoauth
Copy link

jkupczaknoauth commented May 20, 2024

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      @media (max-width: 480px) {
        u + .body .link-2 {
          background-image: linear-gradient(#3156eb, #3156eb);
          background-clip: text;
          color: transparent;
        }

        div > u + .body .link-2 {
          background-image:none;
          background-clip:inherit;
          color:#3156eb;
        }
      }
    </style>
  </head>
  <body class="body">
    <div style="font-family: Open Sans, sans-serif; font-size: 16px; line-height: 16px; text-align: center; color: #565f6c; border-radius:12px; outline: 2px solid #3156eb; width:200px; max-width:200px; padding: 12px 12px; text-transform: uppercase;">
      <a style="text-decoration:none; color:#3156eb; display:block" class="link-2" href="#"><span class="link-2">View reservation</span></a>

      </div>
   </body>
</html>

Screenshot_20240520-101936

@jkupczaknoauth
Copy link

I've tested this code on iPhone and it's even worse over there than it is on Android.

image

@jkupczaknoauth
Copy link

Can you share what exactly I'm looking at here? I see a button with blue text and a blue outline. But the person you responded to wants to keep the white background while in dark mode. So I don't understand exactly what your code is doing.

And for what it's worth, I can get a blue outline and blue text button in Gmail without using any the code you provided.

@Art-Korolev
Copy link

Rewrote the code, now it works on iOS 17 in the Gmail application, Apple mail in dark modes

  1. the color is preserved, the inversion will be applied without styles,
  2. does not work on Android
  3. I didn鈥檛 immediately see the white background

gmail ios 17 iphone 12 mini

photo_2_2024-05-21_12-11-54
photo_1_2024-05-21_12-11-54

@jamescridland
Copy link

Gmail for Android is inverting country flags... and I have no idea how to stop it from doing so.
(The other image here is Mimestream on the Mac, which uses a proper webview to render emails).

2df22d6f495dfe18
7fc523768824b1f4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Gmail Webmail, iOS and Android apps
Projects
None yet
Development

No branches or pull requests