Thursday, February 2, 2023
HomeEmail MarketingWhat's Darkish Mode for Emails & 5 Tricks to Optimize E mail...

What’s Darkish Mode for Emails & 5 Tricks to Optimize E mail for Darkish Theme — Stripo.electronic mail


Whereas designers and researchers broadly talk about whether or not darkish mode for electronic mail is wholesome and obligatory, individuals hold utilizing it increasingly.

Dark Mode_Stripo

What’s darkish mode?

The darkish mode shows light-colored texts, icons, and UI components on darkish backgrounds. 

How does it work? Some consider that darkish mode shifts colours to distinction ones (reverse ones from the colour wheel) when an electronic mail is opened on a tool with the darkish mode.

However this isn’t fairly true. It doesn’t invert inexperienced to purple, nor blue to gold or yellow. The darkish mode makes use of lighter shades of the very same colours (in case you didn’t set a particular colour as a content material background).

How does it do it? An electronic mail consumer detects the e-mail content material background colour. Then applies darkish background if it isn’t been set and applies distinction shades of electronic mail content material colours.

Colors in Light Mode.EN

(E mail in a lightweight mode)

Colors in Dark Mode.EN

(electronic mail in a darkish mode)

Nevertheless, on the subject of a black background — the darkish mode turns it to white in Gmail on iOS and Android. Darkish gray will get shifted to gentle gray, and so forth. 

What makes the darkish mode so standard?

This function is getting so standard for a number of convictions:


  • it is strongly recommended by ophthalmologists

Gentle textual content on a darkish background is claimed to scale back eye pressure. Nevertheless, ophthalmologist nonetheless dispute on it;

Nicely. That is true. Many individuals flip it on simply because it’s one thing new and so they wish to attempt it out;

Some customers discover it extra snug to learn on darkish screens, particularly when it’s night time outdoors;


  • it saves your battery life

Google confirmed that the darkish mode on Android saves your battery life by as much as 50%. Nevertheless, it’s related for the OLED screens solely.

Wired says the darkish mode has no impression on the battery life if we’re speaking in regards to the LCD screens, that are broadly utilized by Apple. Btw, Apple promised to drop all LCD screens in favor of the OLED ones.

Checklist of electronic mail shoppers that help the darkish mode, and the way your emails render in them

The darkish mode is simply getting standard. Solely the newest variations of OSs help it and render emails accurately.


  • Gmail app on Android (Android 10)

It inverts colours totally: not just for the UI, however emails are displayed at midnight mode, as effectively.

We examined all kinds of emails. One in all them initially had a darkish background and a white row/stripe with a menu. 

Android 10 didn’t invert darkish to gentle colours, nevertheless it modified my white row to darkish.

Dark Mode in Gmail App_Android.EN

(electronic mail on Android 10, darkish theme)

Vital to notice:

Like we stated, solely the newest model of Android — Android 10 — renders emails in darkish mode. However there are different compulsory situations to pay shut consideration to if you wish to see emails in Android’s darkish mode. They’re as follows:

  1. Your Gmail app ought to be downloaded from Google PlayStore, not the app that was in your cellphone by default. Samsung telephones have them generally.

  2. It is best to have the newest model of the Gmail app, ideally up to date in November 2019. 

Dark Mode for Emails_Checking Version of the Gmail App


  • Gmail app on iOS (iOS 13)

What does the Gmail app on iOS do?

My electronic mail was initially darkish with the sunshine menu row. iOS inverted darkish to gentle colours, and lightweight to darkish colours.

Gmail App on iOS_Dark Theme Email.EN

Vital to notice:

Gmail remains to be rolling out the Darkish Mode for emails on iOS. It’s purported to be totally seen and out there to all customers in like 2 weeks. However the identical course of for Android took Google roughly two months as an alternative of two weeks. We simply must be affected person.


  • The iPhone Native Mail App (Native Mail on iOS)

The app permits you to activate the darkish mode for the UI and the e-mail space. In case you have set a clear background colour, then the iPhone Mail will flip it to darkish.

In any other case, your emails will look completely the identical in each darkish and lightweight modes. 

Emails in Dark Mode_Native Email on iOS.EN

Similar state of affairs right here. The app permits turning the darkish mode on for the UI, nevertheless it doesn’t have an effect on the design of your HTML emails at midnight mode.

HTML Email in Dark Mode_Apple Mail_Test.EN


  • Gmail on macOS and Home windows

It doesn’t invert colours or does it partially — name it no matter you need.

The app permits you to activate the darkish mode for the UI, however the electronic mail space stays gentle — so, it doesn’t have an effect on the e-mail rendering in any respect. Your emails will look precisely the identical in each darkish and lightweight modes.

Emails for Dark Mode_Gmail on macOS.EN


  • Outlook app (2019) on Android 

It’s stated to invert colours partially. Should confess, I couldn’t attempt it out as I don’t have Outlook 2019 on my smartphone.


  • Outlook app (2019) on iOS

It’s purported to invert colours partially. However I additionally wouldn’t have the Outlook 2019 app on iPhone.

Inverts colours totally. It does similar to Android 10 — leaves darkish design the best way it’s, and turns a lightweight background to darkish.

Dark Mode for Outlook_Test Emails.EN

The state of affairs with Outlook.com may be very attention-grabbing.

It’s purported to invert colours partially. However once I ship an electronic mail with a darkish design, Outlook.com shifts colours to gentle on an evening mode. And once I ship an electronic mail with the design made in gentle colours, Outlook.com inverts colours to darkish.

Testing Dark Mode in Outlook_com.EN

Fascinating info in regards to the darkish mode on Outlook.com:

1. Outlook.com doesn’t have an effect on the design of AMP emails in any respect.

When you’ve set a white background — that is what your customers will see on this specific electronic mail consumer even with a darkish mode on.

AMP Emails in Dark Mode_Outlook.EN

2. Outlook.com permits you to see electronic mail in each gentle and darkish modes with out altering the UI’s colour.

To show emails from gentle to darkish and vice versa, it’s essential to solely click on this button:

Setting Dark Mode in Outlook

3. Outlook doesn’t invert border colours.

Tricks to optimize emails for darkish mode

Don’t attempt to hack the darkish mode in order that your emails render like they do on common modes. As a result of if individuals use this mode, they do it for a motive. And we should always respect that.

So, in an effort to optimize your electronic mail template for the darkish mode, it is best to:

1. Work on the imagery

a) Use icons and pictures with clear backgrounds or make sure that their backgrounds are of the identical dimension to keep away from this:

Dark Mode_MailRu

Would you agree that this isn’t the most effective instance of a darkish theme electronic mail as photos white various background sizes destroy the whole imporession?

b) Watch out with clear photos

You’re supposed to make use of photos with clear backgrounds for product playing cards.

Nevertheless, images of individuals would look higher if they’ve a particular background. 

Using Photos with Backgrounds for DArk Mode.EN

2. Work on logos

a) Might your logos don’t have any backgrounds

Bad Example of a Logo in Dark Mode.EN

b) Might your logos be written not in black to render effectively throughout each darkish and lightweight themes

Some coders counsel that you simply use two logos and even present a code pattern which ensures that black emblem is displayed within the gentle mode, and white — at midnight mode.

We examined — the code didn’t assist. However made our electronic mail code a lot heavier.

c) Apply gentle shadows to black logos

In case your emblem must be written in black, add gentle shadow to it. It’s going to look good, and it’ll comply together with your model design. 

Logo with a Shadow

3. Set background colours for electronic mail containers

If you do not need your electronic mail content material to have a darkish background, chances are you’ll set customized one with Stripo.

The colour that you simply set because the “Background colour of content material” will stay precisely the identical at midnight mode.

Email Content Background Color_Setting Colors with Stripo

Set “clear” colour to the stripe then — on this case, the chosen background colour might be utilized to electronic mail content material, however to not the whole electronic mail space.

Background Color for Email Content.EN

Be sure you set the identical colour scheme to all stripes/rows. 

4. Take a look at your emails

All the time take a look at your HTML emails in each common/gentle and darkish appearances.

5. Don’t add any further code components

Regardless of some suggestions so as to add particular code components in your darkish theme templates which might be stated to allow your emails to render in a darkish mode, these code samples don’t clear up any points but. A minimum of, that is what quite a few checks present.

In addition to, electronic mail templates work fairly effectively in most electronic mail shoppers.

Therefore, it’s not rocket science to optimize your electronic mail designs for the darkish mode — you solely must work on electronic mail look. No must work with codes but.

How does the darkish mode impression plain-text emails?

Private emails in a darkish mode are stated to all the time render accurately throughout all electronic mail shoppers that help this new function.

Text-only Emails in Dark Mode.EN

However is that this true? Let’s verify:

1. Gmail on desktop doesn’t invert our emails in any respect. Therefore, we shouldn’t be nervous about that.

2. Gmail on iOS, and Android reveals gentle typography on darkish background.

3. Outlook additionally inverts the colours of our plain-text emails in a darkish mode.

Text-Only Emails in a Dark Mode in Outlook.EN

4. Native iPhone, and Apple Mail Apps do invert background colours from gentle to darkish, and textual content colours from darkish to gentle on the subject of private emails at midnight mode.

Nevertheless, there are some issues about plain-text messages in Apple Mail and in iPhone mail price being talked about:

Plain-text Emails in Apple Mail.EN

  • even when that is the primary electronic mail in a sequence, nevertheless it incorporates a picture, your private electronic mail in a darkish mode would possibly go white. Your organization emblem which is included in your electronic mail signature is taken into account a picture, as effectively;

  • private emails that have been forwarded to you may additionally have white backgrounds.

Ultimate ideas

After all, contemplating that solely a small share of customers can see the darkish mode, we may be tempted to ask ourselves — is darkish mode actually definitely worth the effort it takes? It’s! To start with, individuals use it for a motive. We should always respect that and optimize our electronic mail designs for the darkish mode. 

Second of all, the recognition of this function is rising, and really quickly a bigger variety of our subscribers will flip this mode on.

Use E mail Templates To Goal Darkish Mode in Fashionable E mail Shoppers

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments