Order Now

In the Limelight ‘Dark Mode’ in Emails

Dark Mode has entered almost every app, browser, device, and of course email inboxes and taken the entire VIRTUAL EXPERIENCE to the next level.

Email sign

WHAT IS
DARK MODE?

One of the fastest-growing marketing trends, it is a reversed color scheme that imparts a soothing experience to the eyes. It lets you view light-colored text, UI elements, and icons on dark backgrounds.

Limelight-darkmode
Limelight-darkmode2

THE BRIGHT
BEGINNING

Apple logo

September 2018

Apple introduced Dark Mode in its 15th release of desktop Operating System, macOS Mojave.

Gmail

September 2019

Gmail launched Dark Mode for Android and iOS devices and even iOS Mail in the same year.

Here are 2 recent studies that throw light on how dark mode is being preferred by more and more people.

According to Android Authority (March 2020),

91.8% of people use dark mode, wherever available.

Gmail

Earlier, Polar (November 2019) revealed similar results:

95% prefer dark mode.

Which theme do you prefer?

People use dark mode percentage

APPLE USERS AND THE DARK MODE SENTIMENT

While merely 7.5% of people use dark mode on Apple Mail, almost 37% of people have adopted dark mode on their iOS.

Dark mode on Apple Mail
Dark mode on Apple Mail2

WHAT DOES
IT LOOK LIKE?

Take a look at this example for a better understanding of what an email looks like in the dark mode.

Insider
Insider2
Limelight-dark mode

A RADIANT TREND THAT’S COMFORTING TO THE EYES

Why are more and more people embracing dark mode on their devices to view emails? Here are 4 primary reasons.

Less exhausting for the eyes in less illuminated rooms

Embracing dark mode

Saves battery life, as it reduces screen brightness

Makes content more legible, thereby increasing readability and content consumption

Classy look and feel

6 CHALLENGES WITH DARK MODE - ELUCIDATING THE DARK TRUTH

While dark mode is an unstoppable trend, there are some challenges that are holding back some brands from making the most of it. Take a look:

01.

Email clients render dark mode emails in 3 different ways

  • The Innocent Status Quo

    Desktop, web, and legacy mobile email clients are a blessing!

    They do not change anything in the email, irrespective of the mode.

  • The Troublesome Inverted Color Scheme

    • Partial Color Inversion of Outlook.com: Just the light background and dark text get reversed with all the other elements of the email remaining as it is.

    • Full Color Inversion of Windows: All the colors of the email will be inverted, which implies that if you have sent an email with a dark theme, it might become a light-themed email in Dark Mode. (Inconveniently funny!)

  • The Merciful Customized Dark Mode

    The advanced Apple Mail lets you customize the email campaign for light as well as dark modes with the help of CSS. HTML meta tags, CSS target, and updated properties can help email developers do a variety of things like changing the font colors, visuals, as well as backgrounds.

  • 02.

    Dark mode might not suit every brand personality

  • 03.

    It can hamper the deliverability if your email fails to render properly in dark mode

  • 04.

    A dark mode email might lose its color contrast, leading to accessibility problems

  • 05.

    Although it is generally believed that dark mode is better for readability, it might not be the case always

WHAT IT SHOULD NOT LOOK LIKE

If not done right, it may lead to a broken layout as shown in this image

Limelight-dark mode
Limelight-dark mode

DARK MODE IN EMAILS - HOW COMPATIBLE IS IT?

EMAIL CLIENT
  • APPLE MAIL
  • IPAD/IPHONE
  • GMAIL APP (IOS)
  • GMAIL APP (ANDROID)
  • OUTLOOK APP (IOS)
  • OUTLOOK APP (ANDROID)
  • OUTLOOK 2019 (WIN)
  • OUTLOOK 2019 (MAC)
  • OUTLOOK.COM
@MEDIA
  • YES
  • YES
  • NO
  • NO
  • PARTIAL
  • PARTIAL
  • NO
  • PARTIAL
  • PARTIAL
@(DATA-OGSC)
  • NO
  • NO
  • NO
  • NO
  • NO
  • NO
  • NO
  • NO
  • PARTIAL
INVERSION OF COLORS IN DARK MODE
  • INVERSION TO DARK WHEN <META> WILL BE ADDED
  • INVERSION TO DARK WHEN <META> WILL BE ADDED
  • FULL INVERSION
  • PARTIAL INVERSION
  • SOME OF THE COLORS WILL BE INVERTED
  • SOME OF THE COLORS WILL BE INVERTED
  • FULL INVERSION
  • SOME OF THE COLORS WILL BE INVERTED
  • PARTIAL INVERSION

Now, considering these challenges, how to ensure the mode is dark and not the experience?

Follow these TIPS to make a bright impression.

6 ILLUMINATING
DESIGN TIPS

Dark mode

Include images with transparent backgrounds

Give a translucent outline to transparent PNGs with dark text so that your email renders well even on email clients that do not support dark mode

If your logo is black, add transparent images so that the background color changes smoothly in dark mode. If you don’t do so, your email may look like this!

Email dark mode

It is advisable to have a white stroke on your black font in images or icons

Always test your emails for proper renderability in dark themes

If you are unsure of how to do it?, simply send a plain text email rather than an HTML template .

4 EFFECTIVE CODING
MANTRAS TO FOLLOW

  • 01.
    Include metadata to enable dark mode in email clients.

    The first step is to enable dark mode in the email for subscribers who have their dark mode settings turned on. You can do so by including this metadata in the <head> tag.

    CODE

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

  • 02.
    Include dark mode styles for @media (prefers-color-scheme: dark)

    Write this media query in your embedded <style> tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS), and Outlook App (iOS).

    If you do not want an outlined logo in your email, you can use .dark-img and .light-img classes as shown below.

    CODE

    @media (prefers-color-scheme: dark ) { .dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
    .light-mode-image { display:none; display:none !important; } }

  • 03.
    Use [data-ogsc] prefix to duplicate dark mode styles.

    Include these codes for the email to be compatible with dark mode in Outlook app for Android.

    CODE

    [data-ogsc] .light-mode-image { display:none; display:none !important; } [data-ogsc] .dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }

  • 04.
    Include dark mode-only styles to the body HTML

    Your HTML tags must have the correct dark mode classes.

    Dark mode-only styles to the body HTML
    Chat box
    CODE

    <!-- Logo Section -->

    <a href="http://email-uplers.com/" target="_blank" style="text-decoration: none;"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-black.png" width="170" alt="Uplers" style="color: #333333; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" class="light-mode-image"/>

    <!-- This is the hidden Logo for dark mode with MSO conditional/Ghost Code --> <!--[if !mso]><! --><div class="dark-mode-image" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="center"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-white.png" width="170" alt="Uplers" style="color: #f1f1f1; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" />
    </div><!--<![endif]-->

    </a>
    <!-- //Logo Section -->

THE FUTURE
SEEMS ‘LIT’

Email designing is all about imparting a flawless experience, and that should be your objective, irrespective of the theme the email is opened in. Just make sure you consider the email clients used by your subscribers while designing the dark mode emails so that there are no broken email experiences. And with the trend catching up fast, all email clients, too, are sure to provide support for this awesome feature, soon.

Embed this infographic-

Got an Email

Project?

Click here