Dark Mode

[ghost]

I searched to see if anyone else has opened this issue and it's more a theory on how to handle dark mode. I currently use Foundation For Emails 2.0 and the process for inlining final production email code seems similar to MJML based on the documentation.

I'm currently thinking about switching to MJML. One of the big reasons for that is when inlining html on Foundation for Emails it treats Desktop First. It adds display:block to every image via the inliner which makes it damn near impossible to use auto switching of images for clients that support / prefer dark mode / light mode.

It looks like MJML does the same thing when inling code via the website inliner or the CLI. Just curious if a solution would exist to combat this problem.

[iRyusa]

Well for image swapping it would just require to use a css-class and a media query that hides/display a mj-image (the attribute is applied at the top level already to ensure you can hide the whole thing) as you can't swap img src via css anyway.

You might need extra css to ensure that desktop Outlook hides the dark version.

[ghost]

I'll play around with it some. Thanks for the quick reply.

[David-Guillot]

Hi there,

Struggling on the exact same issue here. My product logo is available as 2 different images (one for light mode, the other one for dark mode), I want to have both images in my e-mail HTML and be able to hide the unwanted version according to the dark mode media query. But the css-class attribute does not add the wanted CSS class on the root element of the <mj-image /> (actually it does, but only for the Outlook version):

<mj-image src="https://scan.contexte.com/logo-black.png" width="275px" css-class="light-mode" />

generates:

<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td
         align="center" class="light-mode-outlook" width="640px"
      >
  <![endif]-->
        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
          <tbody>
          <tr>
            <td style="width:275px;">
              <img height="auto" src="https://scan.contexte.com/logo-black.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:18px;" width="275">
            </td>
          </tr>
          </tbody>
        </table>
<!--[if mso | IE]>
      </td>
    </tr>
  
    <tr>
      <td
         align="center" class="dark-mode-outlook" width="640px"
      >
  <![endif]-->

@iRyusa what do you think?

[iRyusa]

The css class will be applied on the root tag of mj-image (the td generated by mj-column) :

                    <td align="center" class="light-mode" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                        <tbody>
                          <tr>
                            <td style="width:275px;"> <img height="auto" src="https://scan.contexte.com/logo-black.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="275" /> </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>

[David-Guillot]

Ah, the external root, thanks! Well, it's not their either, but maybe it's because my <mj-image /> is not used within a <mj-section><mj-column> pattern... I'll try that ;)

[David-Guillot]

Alright, thank you @iRyusa for your reactivity and accuracy :+1: . I'm not able to close this issue but I think you can consider it answered.

[iRyusa]

We may want to keep this close as an open issue about dark mode handling in MJML.

Maybe we could start to have some attributes that does ease it a bit @ngarnier @kmcb777 like fluid-on-mobile

[David-Guillot]

I understand yes, good point on the long run :+1: . But to be honest, when I look at Litmus previews of my e-mail, I think it's a bit pointless for now, as the only e-mail client that does real dark mode is Gmail for iOS, and it doesn't even seem to be using the prefers-color-scheme media query (my product logo is the same as on other e-mail clients).

[ngarnier]

My 2 cents: given the fact that several email clients apply color changes to your email for dark mode without the ability to target them reliably, my advice would be to optimize your images for both light and dark modes rather than trying to replace them. One way to do this for example is to add a dark border around a white text to avoid a white over white effect, and vice-versa.

[David-Guillot]

Thank you @ngarnier for your analysis. Actually we are working on this matter for the first time, and we had decided to time-box our thinking about it, so we're gonna go for wannabe-universal images to avoid more trouble :).

[roblouw]

Regarding dark mode: Right now I’m adding the meta tags “color-scheme”, “supported-color-schemes” in the head with my preference “content=“light dark”" using mj-raw for apple mail dark mode detection.

I was thinking, something like <mj-color-scheme content=“light dark”> in the head section would make things easier to set a preference?

reference material 1 reference material 2 reference material 3

[iRyusa]

cc @kmcb777 this should be really easy to provide for us now ?

[tonyellow]

I also have a problem with dark mode, e-mails look pretty messed up. Would be awesome to have some logic to handle this.

[tyler-ground]

This seems to be an enduring problem with iOS Gmail in particular https://github.com/hteumeuleu/email-bugs/issues/68

[carlosbaraza]

Did anyone figured out how to style an email to support dark mode?

[nosovk]

Probably may check something from that article

[sidhantsuvagiya]

I searched about changing the logo in dark mode and found the Litmus blog on this, so I tried this in MJML. (I know there is limited support for media prefers-color-scheme, so always use border or shadow for your light version of the logo) Hopefully, it will be helpful for someone in the future :)

So here is the code: https://mjml.io/try-it-live/C1_5K6pb3

<mjml>
  <mj-head>

    <mj-raw>
      <meta name="color-scheme" content="light dark">
      <meta name="supported-color-schemes" content="light dark">
    </mj-raw>

    <mj-style>

      /* Dark Mode Style For Apple Mail and iOS */

      :root {
      color-scheme: light dark;
      supported-color-schemes: light dark;
      }

      @media (prefers-color-scheme: dark) {

      .darkmode{
      background-color:#20272D!important;
      }

      .light_img{
      display:none!important;
      }

      .dark_img{
      display:block!important;
      }

      }

    </mj-style>

  </mj-head>

  <mj-body css-class="darkmode" background-color="#F5F5F5">

    <mj-section>
      <mj-column>
        <mj-text>

          <a href="http://litmus.com/" target="_blank">

            <div class="light_img" align="center">
              <img width="163" height="60" border="0" style="margin:0 auto; padding:0;" src="https://campaigns.litmus.com/_email/_global/images/logo_icon-name-black.png" alt="Litmus" />
            </div>

            <!-- The following Dark Mode logo image is hidden 
              with MSO conditional code and inline CSS, but will be         
              revealed once Dark Mode is triggered -->

            <!--[if !mso]><!-->
            <div class="dark_img" style="display:none; overflow:hidden;" align="center">
              <img width="163" height="60" border="0" style="margin:0 auto; padding:0;" src="https://campaigns.litmus.com/_email/_global/images/logo_icon-name-white.png" alt="Litmus" />
            </div>
            <!--<![endif]-->

          </a>

        </mj-text>
      </mj-column>
    </mj-section>

  </mj-body>
</mjml>