cssemailhtml-emaildarkmodelightmode

How can I ensure my email design stays consistent across light and dark mode settings?

How to make my email design stay the same regardless of the theme setting the user uses on his device.

Per se: I want my email to look the same if my user has light mode on or dark mode on.

An example would be Gmail App automatically changing my white colors to dark colors for the user that received my email.

How do I stop that from happening?

I tried making a design for dark mode but I don't like it as much, so I would really like for my light theme email to stay light themed.

Solution

  • That’s the neat part you don’t. — Meme

    Joke aside, the short answer is that you can't really do that. And you shouldn’t want to do that either.

    Long answer… Email clients (Apple Mail, Gmail, Outlook, …) all have their own specific way to apply a forced dark mode to HTML emails. Some have support for the @media (prefers-color-scheme:dark) media query to let you have your own styles in dark mode (like Apple Mail). Some have their own little hacks to apply your styles (like Outlook.com or the Outlook apps on mobile with the [data-ogsb] selector attributes). But some have none of that (mainly Gmail and Outlook on Windows).

    Here are some good lectures around dark mode in emails:

    In my opinion, you should never fight against dark mode but instead embrace it. The hacks that exist are good for when automatic dark modes create undesired issues (like a white text on a white background). But you should let email clients do their thing as much as possible.