if i open up 9gag on Chrome on my phone, the menu bar changes its color to a dark theme, but when i go to for example ebay.com, it switches back to white. How can i achieve this? How can my website tell Chrome "hey, please use dark mode for this page"?
Googling was not successful, as i do not know how to phrase this correctly - i only found blogposts describing how to activate dark mode as user, but i want my website to tell the browser to be dark, if thats possible
Thanks in Advance,
stay healthy
Related
Im building my first react page and everything is all fun and exciting, but on mobile (ios in my case) There seems to be an underlying white background that appears on page reload (flashing) and when i drag the page too far. Its also visible behind the address bar.
I have checked various other Websites and usually on dark pages the addressbar is a kind of translucent black.
How do i achieve this?
I have already changed the background color in my body element etc. (hopefully not in the wrong place)
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 had used some settings/flags on google chrome to set the all page background colour to black.
current look - all the sites look like this.
I want that to reset to white default one, can someone help with this.
I followed some internet blog for this change which I totally forgot now.
note - it was not an extension from the chrome store.
Have you tried changing the Dark Mode flags?
type chrome://flags into the address bar (also sometimes called the omnibox)
There is a flag Force "Dark Mode for Web Contents" Disable it
I have been editing the code of my Tumblr theme and realized that something causes one of the tags to have a gray color background, but i cant find which part of the code is causing this. I used Inspect Element feature and it doesnt reveal the problematic code!
It is perhaps worth mentioning that this happens only when I'm visiting the page in Google Chrome! IE and Firefox show no gray background.
Here is the link to the page http://xziii.tumblr.com/
What do you think is the problem and how can i get rid of it?
Can you please show us any screenshots, because I can't notice any grey background element in the link you provided. Maybe it's being caused by an extension.
I can't reconstruct your problem, there are no grey bars. Are you using any browser-addons or extensions that could cause this problem?