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

Question

Following CSS is in head of HTML email to change email body color when the device in dark mode.

@media (prefers-color-scheme: dark) {
  .white-cont {
    background: red !important;
  }
}

It turns body of email only in apple mail app. Gmail app does nothing the entire mail is converted to dark color scheme automatically which is not so good.

How to make dark-mode-responsive a gmail email? Why the above tag does not work in gmail? Any solutions?

Answer 1

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.