CODEWITHSUNDEEP
css
nerdychick
nerdychick

Reputation: 415

How do I stop dark mode from destroying my css

I have a website with css styling. When I view in certain browsers when dark mode is enabled the css is absolutely destroyed and the colours which have changed in my site look absolutely hideous. How can I prevent my css/colourschemes being changed because of dark mode?

When I opened my url via a link sent on whatsapp on my android device the default browser - Android's 'internet' application automatically restyles the CSS because I have dark mode active. If other users go to my page and have dark mode active I would prefer them to see the original styling not the dark mode edited version.

I found out that you can use this media query to set css for dark mode: @media (prefers-color-scheme: dark) {. I could duplicate my whole css file which is currently 3000 lines long with dark and light with the same code between the parentheses but this seems nonsensical. Is there any other methods which would work?

enter image description here

Upvotes: 31

Views: 44912

Answers (7)

Tenders McChiken
Tenders McChiken

Reputation: 1543

As it turns out, Samsung Internet — the default web browser for a very large number of devices and the one featured in your screenshot — silently applies a filter that transforms colors on websites in a non-trivial way when the user enables dark mode on their device. See this blog post for more information.

The gist of it is that, as of Samsung Internet version 13.0.1.64, this filter is undetectable with javascript or CSS.

The only thing you can do as a web developer is to warn users and urge them to switch to a better browser:

 <script>
   if (navigator.userAgent.match(/samsung/i)) {
       alert("Your browser (Samsung Internet) might not be showing you this " + 
             "website correctly. Please use a standards-compliant browser" +
             "instead. \n\n" + "We recommend Firefox, Microsoft Edge, " + 
             "or Google Chrome.");
   }
</script>

Upvotes: 33

Spoderman4
Spoderman4

Reputation: 85

Before You do all that, please check if you did not do the mistake, that I did - We're talking here about forced dark theme on mobile, that You think your browser, most probably Chrome, is forcing on every website making it's background black and text white.

What I had was a manually set chrome flag for forcing dark mode.

Go to Chrome and type address chrome://flags then search for "dark" You'll find "Force Dark Mode for Web Contents" flag. If it's not already - set if to "default".

Hope it saves some time anybody, I've wasted 1h over this.

Edit(23.03.2024): It can also be forced by operating system setting(Theme: Dark mode), more here: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

Though of course, in this case it's definitely in your code.

Upvotes: -1

kohashi
kohashi

Reputation: 321

With everyone's input, I found a way to fix the problem perfectly sin Chrome. (Tested with chrome 122.)

Just write the following script inside the head tag.

    <!-- avoiding chrome force dark mode -->
    <script>
      var isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
      if(isDarkMode){
        document.write(`<meta name="color-scheme" content="dark Only"><\/meta>`);
      }
    </script>

meta color-scheme dark Only means its not changed any css by force dark mode. But in light mode, some backgrounds are force changed to black. So, I checked light/dark mode and write it on dark mode only.

Unfortunately, I do not have a valid test environment for Samsung browser, so I am waiting for comments from those who do.

Upvotes: 1

Maria Ramono
Maria Ramono

Reputation: 579

Had the same issue. Here's what I found.

I added this meta tag to the header tag:

<meta name="color-scheme" content="light only">

The meta tag above indicates that the color scheme is only supported by light mode.

Another option is the scheme preferred in light mode, but it supports dark mode as well:

<meta name="color-scheme" content="light dark">

Tested on Safari, Chrome, Samsung, Facebook in-app browser and Firefox.

Another method is to use CSS:

:root {
     color-scheme: light only;
}

The above indicates that the styling only uses the light version only.

Upvotes: 28

Rashid
Rashid

Reputation: 119

You will face this issue in Samsung internet browser only. if the user has enabled dark mode In "Samsung internet browser(mobile)", the browser automatically changes the css of website to suit to dark mode. no matter if you applied the same css you applied for light mode/default within @media (prefers-color-scheme: dark){}

So if you want to make your website look better in Samsung internet browser, you can detect the samsung browser using this javascript line navigator.userAgent.match(/samsung/i) and apply separate CSS class for Samsung browser.

Upvotes: -2

ryandougc
ryandougc

Reputation: 117

I did some testing and the solution I found is using the !important declaration after the property value that you want to have when browser darkmode is on.

Think about this though, if you are using browser darkmode and go on a website and it stays the same as the lightmode, how would you feel? Personally I get really pissed and leave immediately from a website like that. So I would actually recommend not changing the colors. Users want darkmode for a reason, probably because they don't want bright colourful things hurting their eyes. If they want to use browser darkmode, they understand what will happen to the colors of websites.

The only use case I can see for changing things would be if elements disappear because of darkmode.

That being said, if your elements are disappearing because of this darkmode, look into the root cause first. Understand why they are changing before slapping !important on everything. That is lazy and does not look good on you as a developer.

Upvotes: 0

Federico Moretti
Federico Moretti

Reputation: 584

If I understood, you want users to see the so-called light version even if their browser is set to prefer the dark one. What I’m going to suggest is far from being perfect… I mean, I wouldn’t do so, but I think it should work. Simply copy and paste the CSS you wrote under a @media (prefers-color-scheme: dark) query and manually change what doesn’t work there, without changing the code outside its brackets. Users should see the original, light version of your website no matter what they selected in their browser setting. TBH, I don’t know why you want to do this: the ideal approach IMHO would be to provide both a light and a dark theme with a default fallback.

Upvotes: 0

Related Questions