ET
3
ios gmail app dark mode - overwrite text-color on background image
Hello,
I have a white text (also tried #fffffe) on a background image. the image is in the same color in the ios gmail app on dark mode, but the color turns black and is difficult to read.
Any chances that I can overwrite the color? I tried kind of all possibilities with @media (prefers-color-scheme: dark) {} but nothing is working for me - someone who has something that works?
Thanks.
Elisabeth
I found the following code will keep keep text white in most browsers except Windows mail 10 & 11.
<!--[if gte mso 16]>
<style>
.keep-white {
mso-style-textfill-type:gradient;
mso-style-textfill-fill-gradientfill-stoplist:"0 #FFFFFF 0 100000\,100000 #FFFFFF 0 100000";
color:#000000 !important;
}
</style>
<![endif]-->
<style>
u + .body .gmail-screen { background:#000; mix-blend-mode:screen; }
u + .body .gmail-difference { background:#000; mix-blend-mode:difference; }
</style>
<p style="padding-top:10px;padding-bottom:0px;margin:0px;font-family:'Open Sans',Helvetica, Arial,sans-serif;font-size:24px;line-height:34px;color:#ffffff;text-align:center;">
<!--[if mso 16]><strong style="color:#ffffff;" class="keep-white"><![endif]-->
<!--[if !mso 16]><!-- --><strong style="color:#ffffff;" class="gmail-screen"><span class="gmail-difference"><!--<![endif]-->
Combo text hack. <br>Works everywhere except Windows 10 & 11 mail.
<!--[if mso 16]></strong><![endif]-->
<!--[if !mso 16]><!-- --></span></strong><!--<![endif]-->
</p>
Is there a way to do this without having to make the text bold? Does it have to contain the strong tag?
The strong tags are used to apply the different classes. You could say <strong style="font-weight:normal;color:#ffffff;" class="keep-white"> if you don't want the text bold.
Another way to go about it is to put the class in the p tag but then you would have to create 2 p tags, <!--[if mso 16]> and another for <!--[if !mso 16]>
Dark mode shifts the background and font colors of an email to light on dark. ... for your images allows the background color change in dark mode to appear ...https://allmenuprice.info/burger-king-uk-menu-prices/
Hello Elisabeth,
We have faced the same issue as yours.
We have taken a transparent background image.so, change the background color behind the images. so, the text will appear.
another solution, you need to take a text into image format.
Thanks,
Rahul
Hi Rahul,
Thank you. I will give it a try.
/Elisabeth