How to Prevent iOS 13 Dark Mode from Breaking Emails

How to prevent iOS 13 Dark Mode from breaking emails

Thanks to the link provided by @FrankSchlegel

https://webkit.org/blog/8840/dark-mode-support-in-webkit/

using color-scheme: light only in the css on all elements was the answer. Thank you!

Is it possible to opt-out of dark mode on iOS 13?

First, here is Apple's entry related to opting out of dark mode.
The content at this link is written for Xcode 11 & iOS 13:

Entire app via info.plist file (Xcode 12)

Use the following key in your info.plist file:

UIUserInterfaceStyle

And assign it a value of Light.

The XML for the UIUserInterfaceStyle assignment:

<key>UIUserInterfaceStyle</key>
<string>Light</string>

Apple documentation for UIUserInterfaceStyle

---

Entire app via info.plist in build settings (Xcode 13)

---

Entire app window via window property

You can set overrideUserInterfaceStyle against the app's window variable. This will apply to all views that appear within the window. This became available with iOS 13, so for apps that support previous versions, you must include an availability check.

Depending on how your project was created, this may be in the AppDelegate or SceneDelegate file.

if #available(iOS 13.0, *) {
    window?.overrideUserInterfaceStyle = .light
}

---

Individual UIViewController or UIView

You can set overrideUserInterfaceStyle against the UIViewControllers or UIView's overrideUserInterfaceStyle variable. This became available with iOS 13, so for apps that support previous versions, you must include an availability check.

Swift

override func viewDidLoad() {
    super.viewDidLoad()
    // overrideUserInterfaceStyle is available with iOS 13
    if #available(iOS 13.0, *) {
        // Always adopt a light interface style.
        overrideUserInterfaceStyle = .light
    }
}

For those poor souls in Objective-C

if (@available(iOS 13.0, *)) {
        self.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
}

When set against the UIViewController, the view controller and its children adopt the defined mode.

When set against the UIView, the view and its children adopt the defined mode.

Apple documentation for overrideUserInterfaceStyle

---

Individual views via SwiftUI View

You can set preferredColorScheme to be either light or dark. The provided value will set the color scheme for the presentation.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Light Only")
            .preferredColorScheme(.light)
    }
}

Apple documentation for preferredColorScheme

---

Credit to @Aron Nelson, @Raimundas Sakalauskas, @NSLeader and @rmaddy for improving this answer with their feedback.

HTML email background color is not displayed in Gmail/mobile/iOS/dark mode

Gmail iOS dark mode conducts a full inversion of your colours without thinking about it. Thus, even a darkly coloured email will get changed to light colours in 'dark mode', as you have experienced!

Furthermore, Gmail iOS provides no controls such as @media (prefers-color-scheme).

I noticed the image didn't get inverted. Maybe it could look nice to have the banner as an image, fading into transparency at the bottom (saved as png24). Then on light mode, it fades into the dark colour, but on dark mode, it fades into light.

A more technical option that may or may not work could be (untested) to have a 1x1 pixel background image the colour you want, and then use this hack to keep the text white: https://www.hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes/.

How to use @media (prefers-color-scheme) in responsive email in Gmail?

Dark Mode is a trend in email development to present a darker color palette for email to make it more suitable in low-light environments. Dark Mode is supported by some email clients in IOS, Android OS, MacOS Mojave and newer and Outlook 2019.

With Dark Mode enabled, the email in essence inverts colors. Backgrounds that used to be white become dark (usually hexadecimal color #333, text that was dark becomes light. However, not everything swaps in a manner that is expected. Backgrounds on images and tiles remain the same, which looks ... off. To add to the issue, no two email clients are taking the same approach to present Dark Mode, so a few creative solutions need to be implemented so that emails continue to look as expected by the developer.

The bad news is that we cannot specifically target Dark Mode via CSS in email via @media query or generated class name for Gmail or Outlook. Gmail replaces color values in the <style> sheet and Outlook will inline Dark Mode color values and adds an !important to them and makes it impossible to override it in the <style> sheet.

Solution

Until Google and Microsoft offer a solution, the best approach forward is to accept this is a reality and design emails that work no matter what the background color the user chooses to view them. More users are adopting Dark Mode, so it's only going to become more popular going forward.

Good luck.

Force text color in Gmail iOS on dark background using Mailchimp

I hope services like Mailchimp and Hubspot start specifically creating support for dark mode. I am going to close this out, but if anyone has tips, tricks and ideas for the future I think this is going to be more and more important as we see the greater shift to dark mode.

---

Related Topics