How to Use @Media (Prefers-Color-Scheme) in Responsive Email in Gmail

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.

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/.

Responsive emails on Gmail app (Android)

There is no workaround using media queries as they can't be inlined. Unfortunately there is no solution for Gmail regarding responsive email (assuming responsive=media queries).

Here are the alternatives:

1. Fluid layout - A percentage based layout - usually a single column email that is 100%. You can add max-width workarounds to limit its width on desktops. This is 100% supported in all major clients and is the best technique for HTML email in my opinion.
2. Aligned tables - this is more 'adaptive' than responsive. Works the same as floating divs. HTML's align="left" attribute in a table works more consistently in major email clients, as float has limited support.
3. Keep to the left - Simply design your email with all the important stuff to the left side. Devices will always show the left most 300 or so pixels, so a split column, text left, image right layout may be appropriate.

You can find several examples of fluid and float/align here.

Can I able to put style html content on Gmail Signature?

I think the short answer is 'no'.

While GMail now supports quite a large selection of CSS properties it does not support all media queries.

See https://developers.google.com/gmail/design/reference/supported_css for the current list.

It supports some media queries but not the light/dark mode queries you want to sense.

---

Related Topics