htmlhtml-email

How to disable HTML email from adjusting with Dark mode?


I'm new to HTML codes in general. I'm trying to create an HTML email using this template. Things are working fine except for one thing: the email colors are changing when my phone is on dark mode. How can I disable that?


Solution

  • Many people desire to have their phones or computers in a dark mode/theme for readability, battery-saving, and/or reduced eye strain. You should not seek to remove this.

    Furthermore, the current landscape of email clients is such that you cannot necessarily control this. The following table describes the support for different methods available to email developers, and it's not great.

    Email dark mode email client support chart, Oct 2023 - Litmus

    See the full writeup on Litmus https://litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers

    But to answer the question for those who have legitimate needs to remove this functionality, "it's complicated".

    For Apple it relies on @media (prefers-color-scheme: dark) so if you don't include that, but do have at least one image, it will not change. It will remain light mode. Otherwise, for just text, you can write in your desired colours using that media query.

    If you make something an image, it will not change. Images don't get changed (there was a period where small transparent pngs got inverted, but that's not the case any more). Remove transparency if you don't want those areas changing.

    For a hack that keeps text white on Gmail iOS (which otherwise gives us no control), see this extensive guide by Rémi Parmentier https://www.hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes/

    For a hack that keeps text white on Outlook desktop on Windows (again, which gives us no official controls), see Nicole Merlin's https://webdesign.tutsplus.com/tutorials/how-to-fix-outlook-dark-mode-problems--cms-37718