How to not let dark mode on phone affect my website?

Admin 1
Viewed 3549

when a phone has darkmode set in the system UI it affects the html and css on my website, e.g. changing colors. I don't want this to happen. Is there a way to stop the UI dark mode from changing the style of my html?

Below are the snippets that I added that gave me no result.

    @media screen and (prefers-color-scheme: light) {
    body {
      background-color: white;
      color: black;
    }
  }
  @media (prefers-color-scheme: light) {

}
android-darkmode ios-darkmode html
1 Answers

You can use a special custom CSS media query. This media query will activate when the preferred color scheme of your device is dark. This way you can serve the user different styles when they prefer dark mode.

@media (prefers-color-scheme: dark) {
  /* Your css */
}

For more details check this website

Admin1
Related