How do I stop dark mode from destroying my css

Question

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?

Answer 1

As it turns out, Samsung Internet — the default web browser on a very large number of devices, and 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("You are using a defective browser (Samsung Internet) that " + 
             "might not be configured to display this website properly. " +
             "You should consider using a proper standards-compliant " + 
             "browser instead. \n\n"+
             "We recommend using Firefox, Microsoft Edge, or Google Chrome.");
   }
</script>

Answer 2

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.