Hey everyone! I’m trying to make my HTML emails look good in dark mode, especially in Gmail. I’ve got this CSS in the <head> of my email:
@media (prefers-color-scheme: dark) {
.night-mode-container {
background: #333 !important;
}
}
It works fine in Apple Mail, changing the email body color when dark mode is on. But in Gmail? Nada. The app just applies its own dark scheme to the whole email, and it looks awful.
Anyone know why this doesn’t work in Gmail? Is there a way to make our emails respond to dark mode in Gmail? I’d love to hear your tips or if you’ve found a workaround. Thanks!
yea, gmail’s dark mode is a real headache. i’ve tried those media queries too, no luck. 
what works for me is using neutral colors that look ok in both modes. like, avoid pure black/white. also, inline styles sometimes help override gmail’s stuff. keep it simple and test a ton!
I’ve encountered this issue with Gmail’s dark mode as well. Unfortunately, Gmail doesn’t support CSS media queries for dark mode detection. They apply their own dark mode styling, which overrides custom CSS.
One workaround I’ve found somewhat effective is using a combination of light and dark elements in your design. This way, your email looks decent in both light and dark modes. For example, use mid-tone colors for text and slightly darker backgrounds.
Another approach is to design specifically for Gmail’s dark mode. You can test how your emails look by toggling dark mode in the Gmail app. Then adjust your design accordingly, keeping in mind it might not be optimal for other email clients.
Ultimately, creating a perfect dark mode experience across all email clients remains challenging. Focus on ensuring readability and contrast in both modes rather than trying to control every aspect of the appearance.
As someone who’s been knee-deep in email design for years, I can tell you that Gmail’s dark mode is a real pain. I’ve tried every trick in the book, and sadly, there’s no silver bullet.
Here’s what I’ve learned: Gmail basically ignores our carefully crafted CSS when it comes to dark mode. It’s frustrating, but we have to work with what we’ve got.
My go-to strategy now is to design emails that look good in both light and dark modes. I use colors that transition well - think muted tones rather than stark blacks and whites. It’s not perfect, but it’s the best compromise I’ve found.
One thing that’s helped me is always testing my emails in Gmail’s dark mode before sending. It’s extra work, but it saves a lot of headaches later.
Remember, email design is all about adaptability. We can’t control everything, so focus on making your content shine regardless of the mode it’s viewed in.