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 · 58 comments
Open

Gmail's dark mode #68

hteumeuleu opened this issue Oct 18, 2019 · 58 comments
Labels
Gmail

Comments

@hteumeuleu
Copy link
Owner

@hteumeuleu 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 label Oct 18, 2019
@hteumeuleu
Copy link
Owner Author

@hteumeuleu 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 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

@M-J-Robbins M-J-Robbins commented Nov 7, 2019

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

@M-J-Robbins M-J-Robbins commented Nov 7, 2019

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

@hteumeuleu hteumeuleu commented Nov 8, 2019

Another example from Medium.com thanks to @Sayo1337:

Pizza Hut

The Medium logo is almost invisible here.

@adrianthomas
Copy link

@adrianthomas adrianthomas commented Nov 15, 2019

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

@ComputerTinker
Copy link

@ComputerTinker ComputerTinker commented Dec 4, 2019

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

@ComputerTinker ComputerTinker commented Dec 4, 2019

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

@alejaaandro alejaaandro commented Feb 25, 2020

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

@hteumeuleu hteumeuleu commented Mar 25, 2020

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

@ayalalaura ayalalaura commented Apr 22, 2020

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

@hteumeuleu hteumeuleu commented Apr 30, 2020

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

@M-J-Robbins M-J-Robbins commented Apr 30, 2020

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

@hteumeuleu hteumeuleu commented May 6, 2020

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

@hteumeuleu hteumeuleu commented May 8, 2020

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

@hteumeuleu hteumeuleu commented May 11, 2020

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

@rowdyrauxa rowdyrauxa commented May 15, 2020

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

@hteumeuleu hteumeuleu commented May 18, 2020

@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 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

@hteumeuleu hteumeuleu commented May 18, 2020

@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

@gnickygnicky gnickygnicky commented Sep 8, 2020

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

@devincloudkelly devincloudkelly commented Oct 15, 2020

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

@devincloudkelly devincloudkelly commented Oct 22, 2020

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

@BryceSalstrom BryceSalstrom commented Oct 26, 2020

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

@devincloudkelly
Copy link

@devincloudkelly devincloudkelly commented Oct 27, 2020

@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

@BryceSalstrom BryceSalstrom commented Oct 27, 2020

@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 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>

@tvb
Copy link

@tvb tvb commented Feb 3, 2021

I just ran into this issue, it's plain rubbish. Google seriously? Get your sh*t together!

@Letalus
Copy link

@Letalus Letalus commented Feb 4, 2021

me too. Man this weird dark mode sucks so hard. It's so hard to read anything.

Edit: --> it was my mistake, I forgot to deinstall a google chrome dark mode plugin

@hteumeuleu
Copy link
Owner Author

@hteumeuleu hteumeuleu commented Feb 4, 2021

@tvb and @Letalus Please provide screenshots and/or code examples. Saying things suck helps no one, reporting bugs do!

@Letalus
Copy link

@Letalus Letalus commented Feb 4, 2021

@hteumeuleu sure here are following screenshot
Screenshot 2021-02-04 at 16 56 12
Screenshot 2021-02-04 at 16 56 33
Screenshot 2021-02-04 at 16 57 36

The funny part about this is, that everything was working fine until today... I have NO idea what changed but I'm pretty certain I didnt do anything.

@hteumeuleu
Copy link
Owner Author

@hteumeuleu hteumeuleu commented Feb 4, 2021

@Letalus Wait, you've got dark mode on Gmail's desktop webmail? To me, Gmail's dark "theme" only applies to the webmail's interface, not the actual emails. Can you confirm this is Gmail's own behavior and not a plugin you might have installed?

@Letalus
Copy link

@Letalus Letalus commented Feb 4, 2021

@hteumeuleu you are right. I removed this morning one plugin which converted website to dark mode. But appearently there was a second one installed hidden within the plugin settings. I removed it and now it is working properly again. Sorry for being stupid and thanks for your help

@tvb
Copy link

@tvb tvb commented Feb 9, 2021

@hteumeuleu Here you go. This is an email I got within the iOS Gmail App set to dark mode (I need to hide the clients details):

Basically every colour has been inverted.

IMG_1336
IMG_1337

@S-Aitchison
Copy link

@S-Aitchison S-Aitchison commented Apr 13, 2021

An example of an email that I'm building where the Gmail App on Android doesn't change the set background colour but does invert the font colour to something that is unreadable and not at all accessible.

Nothing fancy going on in the code, just standard bgcolor="#F4A100" set on the containing <table> and color: #A9001E; on the header tags

I have included the following darkmode code in the <head>
:root { color-scheme: light dark; supported-color-schemes: light dark;} @media (prefers-color-scheme: dark) { /* Custom Dark Mode Background Color */ .darkmode {background-color: #F4A100 !important;} .DMBG02 {background-color: #D65C04 !important;} /* Custom Dark Mode Font Colors */ h1, h2, h3, h4 {color: #A9001E !important;} p, span, b, p > a {color: #111111 !important;} a {color: #FEFEFE !important;} h5, h5 > a {color: #FFF9BD !important;} }

After many attempts using the various methods mentioned here and around the community to try and stop the invert from happening, no such luck and still unreadable, ended up having to change the colour to #010101 which compromises the design and still gets inverted to white, which isn't great but at least it's readable 馃し

Screens below of how it should look vs how it renders in darkmode

image image

@jkupczak
Copy link

@jkupczak jkupczak commented Apr 13, 2021

@S-Aitchison

None of the code that you mention including in your <head> works in any version of Gmail. @hteumeuleu recently published this article of a clever workaround that might help you though.

@PSoltes
Copy link

@PSoltes PSoltes commented May 7, 2021

problem
just adding an example of invert breaking accessibility (on IOS, but android is as bad), inverting like that would be ok, if prefers-color-scheme media query would be supported, cheers and good luck solving dark mode :)

@nunonegrier
Copy link

@nunonegrier nunonegrier commented May 7, 2021

To prevent gmail from changing text colors in dark mode, set text colors with inline css and use the !important rule.

@PSoltes
Copy link

@PSoltes PSoltes commented May 10, 2021

To prevent gmail from changing text colors in dark mode, set text colors with inline css and use the !important rule.

text colors are set inline and are !important; in my case, yet gmail IOS still changes them. Rules are on parents of elements containing text though.

@nunonegrier
Copy link

@nunonegrier nunonegrier commented May 14, 2021

To prevent gmail from changing text colors in dark mode, set text colors with inline css and use the !important rule.

text colors are set inline and are !important; in my case, yet gmail IOS still changes them. Rules are on parents of elements containing text though.

You are right @PSoltes , on IOS the problem keeps happening in darkmode. In every other scenario I could test, using the !important rule worked, including the Gmail app on Android in darkmode. So far, this is the simplest and most universal solution to the problem.
I am still looking for a simple solution that works on iOS as well, if I find one I will share it here with you all.

@ImLoaD
Copy link

@ImLoaD ImLoaD commented May 25, 2021

In gmail app on IOS you can put background: linear-gradient(#fff, #fff); instead of background: #fff;.
But what we can do with text, 'color: #fff !important' doesnt actually work :(

@PSoltes
Copy link

@PSoltes PSoltes commented May 25, 2021

In gmail app on IOS you can put background: linear-gradient(#fff, #fff); instead of background: #fff;.
But what we can do with text, 'color: #fff !important' doesnt actually work :(

solution with blendmodes in @jkupczak comment works

@ImLoaD
Copy link

@ImLoaD ImLoaD commented May 25, 2021

In gmail app on IOS you can put background: linear-gradient(#fff, #fff); instead of background: #fff;.
But what we can do with text, 'color: #fff !important' doesnt actually work :(

solution with blendmodes in @jkupczak comment works

thanks!

@daveyko
Copy link

@daveyko daveyko commented Sep 26, 2021

hey guys -- we at Spotify are also encountering this issue -- https://twitter.com/brad_frost/status/1417245116419477507?s=21

while the blendmodes solution is very clever -- it does seem like it can only reliably support white text which is really limiting -- and the ways in which to target gmail client only seems brittle

please if you guys have a chance we should all reach out

https://support.google.com/mail/forum/AAAAK7un8RUV_U7zBUZ8G4/?hl=en&gpf=%23!topic%2Fgmail%2FV_U7zBUZ8G4%3Bcontext-place%3Dforum%2Fgmail and submit a feature request for the gmail client to support prefers-color-scheme media queries -- i think this is the most consistent/stable fix

@M-J-Robbins
Copy link

@M-J-Robbins M-J-Robbins commented Sep 27, 2021

@daveyko i think it might be worth adding to the Gmail issuetracker too https://issuetracker.google.com/issues/new?component=191602&template=824107&pli=1

@daveyko
Copy link

@daveyko daveyko commented Sep 27, 2021

if you guys could star this issue it would be great
https://issuetracker.google.com/issues/201273979
https://issuetracker.google.com/issues/201441498 -> this one needs to be starred actually -- the issue was moved to the Android issue tracker from general Gmail issue tracker

@jgonera
Copy link

@jgonera jgonera commented Oct 22, 2021

https://partnerissuetracker.corp.google.com/u/1/issues/201441498 -> this one needs to be starred actually -- the issue was moved to the Android issue tracker from general Gmail issue tracker

When I follow this link it asks me to log in with a @google.com email. Is this only for Google employees?

@emilyhasadventures
Copy link

@emilyhasadventures emilyhasadventures commented Oct 25, 2021

https://issuetracker.google.com/issues/201441498 This appears to be the public link for the issue daveyko added.

@hteumeuleu
Copy link
Owner Author

@hteumeuleu hteumeuleu commented Oct 27, 2021

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

@Lucian2889 Lucian2889 commented Dec 20, 2021

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

@hteumeuleu hteumeuleu commented Dec 20, 2021

@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

@hteumeuleu hteumeuleu commented Dec 22, 2021

@bartsamuel
Copy link

@bartsamuel 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 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 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 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.

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

No branches or pull requests