(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
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/.
I have a btn-group on this page, in the My Physical Product section's cards, the text in the button must be gradient but if it's impossible, normal text color is ok. It's not visible, check it here.
it must be like this on light and dark all browsers' view
It works on every device/browser, except iPhone-safari and iPad-safari, I couldn't fix this because I don't have macOS.
Notes:
the body tag has the browser name (the browser that you've opened the
site in)
I didn't publish the code here because I can't check if it
not working on safari, and I can't publish the whole site here
there's a dark layout on the website, please fix the text in both the dark and light layouts
you can see how I want the text to be like from any other browser/device from here, just for better understanding
I have a btn-group on this page, in the My Physical Product section's cards, the text in the button must be gradient but if it's impossible, normal text color is ok. It's not visible, check it here.
it must be like this on light and dark all browsers' view
It works on every device/browser, except iPhone-safari and iPad-safari, I couldn't fix this because I don't have macOS.
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 problem with my website background. In Firefox and other browsers the background is much whiter and brighter than in Chrome
This is the code for my background :
body {background:#ffffff url(../../images/background.jpg); direction:rtl; }
http://i.stack.imgur.com/inK3d.png
http://i.stack.imgur.com/KiqT4.png
One explanation for this may be that the JPEG image has an embedded color profile that the browsers are interpreting differently. To keep the colors uniform across browsers, the images should be exported with the sRGB color space.
If you're using Photoshop for instance, if you use the "Save for Web & Devices" option, it will automatically convert the image to the sRGB color space. Instructions for changing export color space will change depending on what image editor you are using, of course.
For more information on how color profiles can affect the way colors are displayed on the web, please see this css-tricks article.
On this page, the <body> element has a background color of #77BFBC. The image (rv-banner.jpg) set as the background of the <header> element also has a background color of #77BFBC.
On windows (either FF or IE), the two colors blend perfectly. However on FF on the Mac, there is a noticeable difference between the background color of the image and that of the <body> element. How can I fix this?
Thanks,
Don
With the release of Firefox 3.5, colour-correction was turned on by default, but its effect depends on your system profile:
http://hacks.mozilla.org/2009/06/color-correction/
In practice, this means images saved with colour profiles are corrected and could show up mismatched to CSS colours.
It's possible to turn off colour-correction in Firefox, which fixes the problem for you, but that still leaves all the other potential visitors out there. Seems like removing the colour profile from the image is the way to go. There is a GIMP plugin that does this, see here for a discussion.
When images are displayed, they are converted from their color space to the color space of the screen.
To make your JPEG images display with the same color conversion as the rest of the elements, you should convert the images to the sRGB color space before saving them.
Browsers that doesn't support color profile information in images always uses the sRGB color space, so if you use sRGB for the images the color profile gets correct even for those browsers.
If there is no color profile in an image file, the sRGB color space is assumed. This means that you can save your images without a color profile to minimise the file size.
Try to save image as png not jpg. And if you are using photoshop, then choose "save for web and devices" not "save as".
This isn't due to your code but color profiles, I don't know if you can change this.