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

Gmail's dark mode #68

hteumeuleu opened this issue Oct 18, 2019 · 8 comments
Labels

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

@adrianthomas adrianthomas commented Nov 15, 2019

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

@ComputerTinker

This comment has been minimized.

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

This comment has been minimized.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can鈥檛 perform that action at this time.