I am having an issue in the rendering of my custom coded HTML Email template in Dark Mode. The email and all the colors work perfectly fine except this one top header. I'm unable to figure out why the green color becomes darker when viewing the email in Dark Mode.
Please see the attached image for what it looks like in Dark Mode:
Instead, it should render the green color like:
Can anyone please help me fixing this green header issue.
Thanks!
As of today, we cannot influence the colors or behavior with Outlook or Gmail clients that support Dark Mode through HTML or CSS. Gmail replaces color values in the <style> sheet and Outlook will inline Dark Mode color values and adds an !important to them and makes it impossible to override.
On Apple / IOS clients, you can use:
<meta name="supported-color-schemes" content="light">
Until Gmail and Outlook offer a solution, you're stuck with Gmail creating obverse colors and Outlook changing everything to a fairly standard group of colors (mostly #333333).
Good luck.
Without seeing your code, it's hard to know exactly what the issue is.
As others have mentioned, if the image is transparent and you're relying on a background color, that would be a cause for this change. Some ESPs (email service providers) invert background and text colors — bright colors, like that green, become darker. Some ESPs also make darker colors brighter in dark mode. Some ESPs allow you to set specific dark mode background and text colors using a media query, but not all support that.
Litmus has a great dark mode guide that breaks down how dark mode works in different ESPs and how to best optimize your emails.
Your best bet would be to make that green section an image just like the second one.
use
filter: invert(1) hue-rotate(180deg)
to invert the color of the web-page and where u don't want to invert the color type
filter: invert(1) hue-rotate(180deg)
again to invent the color as it was before
Related
Introductory information
I wrote the MJML code for the email and then converted it to HTML. As a result, everything works as it should but the background color is not displayed if the following conditions are true:
email client is Gmail
mobile version is used
dark theme is active
the OS is iOS
Examples
The background color is set for the mj-wrapper tag and the mj-section tags:
<mj-wrapper background-color="#27273F" background-url="https://drive.google.com/uc?export=view&id=1Xn1xfvaC97HohG_eE-IktLq8fkAGghV8" background-size="cover">
<mj-section padding-left="32px" padding-right="32px" background-color="#27273F" />
This is what it looks like on a desktop (correctly):
Here's what it looks like in the mobile version of Gmail on android (the same for the gmail mobile iOS version using light theme) (correctly):
And this is what it looks like in the mobile version of Gmail on iOS if you use a dark theme (the bg-color (#27273F) is not displayed):
Question
Could you please help me figure out what's causing the issue and how to fix it?
Additional Info
GitHub link - Here you can see both HTML and MJML code
Thank you!
Gmail iOS dark mode conducts a full inversion of your colours without thinking about it. Thus, even a darkly coloured email will get changed to light colours in 'dark mode', as you have experienced!
Furthermore, Gmail iOS provides no controls such as #media (prefers-color-scheme).
I noticed the image didn't get inverted. Maybe it could look nice to have the banner as an image, fading into transparency at the bottom (saved as png24). Then on light mode, it fades into the dark colour, but on dark mode, it fades into light.
A more technical option that may or may not work could be (untested) to have a 1x1 pixel background image the colour you want, and then use this hack to keep the text white: https://www.hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes/.
(If I've used the wrong tag for this please move to appropriate section.)
I've seen some articles online about using CSS or plain HTML for controlling light/dark mode appearance based on the user's preference, i.e., what they choose on their browser. I've made webpages where the image showed up once the mode was changed but it's either in a div, section, etc. But when I made a background image in the html area then once the it's changed to dark mode the image disappears replaced by black. I hope I've explained that well. Anyway, suggestions to solve this will be appreciated. By the way, I do not want to darken the background image since it's already of a softer light which doesn't jar the dark mode.
Thank You
I am designing HTML email template which look fine on majority devices, iOS's and browsers except Outlook Office 365 on Windows 10 Dark Mode.
The problem is that my background image doesn't appear, instead background colour becomes dark. I have a logo on my background and since it's dar too - I can't see it.
This is how it looks on Outlook Office 365 on Windows 10 Dark Mode:
I would like to display my background image, but if it's impossible - either to change the background colour to light (which is against the Dark Mode rules, I guess), or display white version of the logo (the different image). But the changes should only be made on Outlook Office 365 on Windows 10 Dark Mode
How can I solve this issue?
Try something other than .svg. For example.png.
Outlook Windows doesn't have the controls we need to do that. The best you can do is to edit the image by adding a white stroke to it, or white shadow. This will not show on light mode (assuming your normal background is white--if not, use your normal background colour).
e.g. this white shadow will not show on light mode:
See https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/#design for more information about all this.
I have a logo with a blue background, I've picked the colour via Chrome inspector (matches Firefox colour picker as well), yet on mobile the logo stands out on the background.
What's going on/how can I prevent this?
Why you see another color on another display?
That logo has at least 5 colors in the background. That's the reason you can not match it.
Your monitor and mobile displays are not accurate, and it seems your contrast and brightness of the screen are not correct. In the professional photography and video editing, they call it color blind.
That's the reason professional designers do not use consumer monitors.
If you are a designer you need to have color accurate monitor and you need to calibrate it.
If you want to keep working on the current monitor at least change your monitor brightness, contrast and color settings, close to the natural settings.
What is the software solution?
Get the logo in SVG, PSD or PNG file from the designer. SVG files are better because they are vector files that you can open it with free software like Inkscape. Change whatever you like and export it to the PNG.
If your logo is a text like what you have here, Search font by image and recreate it with Inkscape. The logo you mentioned here seems to be two fonts. Clinica Pro and Sixta. and both of them are not free font.
You can remove the background using Gimp, Layer > Color to Transparency > Color to Alpha, and select background color.
Useful links:
Changing Background Color
Making the background of an image transparent in Gimp
Anyway, I did remove the background from that logo for you (Transparent Background):
I have a website where the background has a light gradient (light gray from top to white on the bottom). When I place an image with a transparent background on the website, the background of the image picks the top color of the gradient. So instead of the image's background appearing to be a gradient as well and blending in with the site, the image's background color is just light gray.
I'm not sure if this is the way it's suppose to be (due to the way transparency works on websites). But I was wondering if anyone could provide a workaround
First of all welcome to StackOverflow :)
It depends. First of all, your website will be rendered differently on different browsers, and that's of vital importance to you, because unless you test it on different browsers, you can't be sure what some users will see.
If you've seen a partially transparent PNG that instead of transparency shows a grey background, chances are you're using Internet Explorer 6, a very old browser that you really shouldn't use. It's the one with the blue E, that E stands for Evil. Run.
On a more serious note, having a link to check would help, or a screenshot, because it's hard to tell just by guessing. PNGs should render fine against any background.