Another Email Dark Mode Saga, please help 😩
I am at my wits end here but I can’t for the life of me figure out how to adjust these colors so that the text doesn’t keep inverting in a way where it’s not legible. The original colors for the text by the way were #fffffe (essentially like white) for the…
I am at my wits end here but I can’t for the life of me figure out how to adjust these colors so that the text doesn’t keep inverting in a way where it’s not legible. The original colors for the text by the way were #fffffe (essentially like white) for the dark blue BG and then #000000 (black but I played around with trying like a dark gray as well) to go against the creme background and it’s still turning out like this. I keep wondering how all of the other promotional emails that I receive are able to retain their white backgrounds but mine can’t 🥴 I’m also using Beefree (now RGE) email builder and even despite reading up on their articles around this, I still can’t find a solution that works. Can anyone provide any insight please? Also this keeps happening in Gmail mobile dark mode. I am already privy to the fact that dark mode email design and inversions vary across each email platform so I know I can’t please all of them., but I’m atleast trying to optimize for Gmail as that is where majority of my email audience base is. I appreciate any assistance in advance.
Collected discussion
Hi ! So I’m testing this out on my Gmail app. Not on mobile browser and so far from what I’m seeing w/ in those app settings I can’t clear the cache from there. And then also i intentionally need to test this in dark mode to make sure that the email looks good in both formats. In regular light it appears fine.
If you’re not using drag and drop, this might be your best bet. Mix blend mode and linear gradient css has been the only way I’ve seen to force this color inversion for Gmail mobile dark mode https://www.hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes/
Beat me to it!
RIGHT! And this is why image based emails still get the air time that they do. Google wants to penalize emails that are too image based and not predominately text based but they turn around and create struggles like this. Like how do we win here?? 🫠
Yeah, dark mode on Gmail is problematic with email. Use lighter background and experiment with the font color. Maybe not, but you can go to phone settings to clear data/browser.
Hmm okay I can consider trying it. I’m not a coder though so this may be tricky 😩. I know how to access the html code within the email but from there the problem lies in trying to identify where to place this code correctly so that I don’t break the email. I just reviewed the article you sent (also thank you so much for sharing) Have you tried this in your emails yet? Has it worked for you?
No I have not, I’ve never heard of postcards email builder, but I can look into it for sure. Thanks :)
“try not using the dark mode and see if that makes a difference” sending that one to my team LOL
Unfortunately while Gmail is slightly less evil than legacy Outlook it’s definitely in the running for the coveted “biggest pain in the ass to develop emails for” award, especially in terms of dark mode. All that money on AI and Google hasn’t figured out that light text on a light background is a bad experience. If you’re comfortable with code and have time to experiment you can try this from Remi Parmentier, but honestly the least fiddly solution might be to go back to your design team and ask about changing some colours. https://www.hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes/
Have you tried importing this HTML email into Postcards email builder? They resolve the dark mode issue, or you can even customize the view so your email displays well in dark mode.
Have you cleared your cache, emptied yiur browser files? When editing the same thing over and over, it builds up storing all of the revisions. Clear your cache and browser, and refresh the page you're working on. You will see a difference. Also, try not using the dark mode and see if that makes a difference.