I’m trying to make my HTML emails look good in dark mode, especially in Gmail. I’ve got this CSS in my email’s <head>:
@media (prefers-color-scheme: dark) {
.night-bg {
background: #333 !important;
}
}
It works fine in Apple Mail, changing the background when dark mode is on. But in Gmail, it doesn’t do anything. Gmail just applies its own dark mode, which doesn’t look great.
Does anyone know why this CSS doesn’t work in Gmail? Is there a way to make Gmail respect custom dark mode styles in emails? Or are we stuck with Gmail’s default dark mode conversion?
hey mate, gmail’s custom dark mode is annoying. they override our css and do their own thing so i’ve seen no fix. might need to design considering gmail’s default mode, or use images for key elements. pretty frustratin’ but that’s the way it goes.
As someone who’s grappled with this issue, I can tell you it’s a real headache. Gmail’s dark mode is notoriously stubborn. I’ve tried every trick in the book, but Gmail just doesn’t play nice with custom dark mode styles.
In my experience, the best approach is to design your emails with Gmail’s dark mode conversion in mind. I’ve had some success using colors that look decent in both light and dark modes. For crucial elements, I sometimes use PNG images with transparent backgrounds.
One thing I’ve noticed: Gmail seems to preserve some inline styles better than others. It’s worth experimenting with different inline style combinations to see what sticks. But don’t expect miracles - Gmail’s algorithm is pretty aggressive.
Honestly, it’s frustrating, but we’re stuck with Gmail’s limitations for now. The best we can do is adapt our designs and hope Gmail improves their dark mode support in the future.
Unfortunately, Gmail’s approach to dark mode is quite rigid. They apply their own conversion algorithm, which overrides custom CSS, including media queries for dark mode. This is done to ensure consistency across various email designs, but it can indeed be frustrating for developers aiming for more control.
One workaround I’ve found somewhat effective is using inline styles with !important flags. While not ideal, it can help preserve some styling. Another approach is designing with Gmail’s dark mode conversion in mind, using colors that translate well. For critical elements, using images with transparent backgrounds can maintain visual integrity.
Ultimately, we’re somewhat at the mercy of Gmail’s implementation. It’s a balance between optimizing for Gmail and other clients that respect custom dark mode styling.