3

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) {

}
  • Welcome to the web, where you have little control over anything. Best thing to do is embrace it and work *with* what the user wants, rather than trying to fight it. – Brad May 23 '20 at 20:23

1 Answers1

1

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

  • This is for Safari only right? I tried adding the snippets (found in an update to post) in my css and ended with no result. –  May 23 '20 at 21:32
  • @KyleSloper In your post, you only have a media query that activates when the preferred color theme is light. So when the user turns on dark mode this CSS won't do anything! You need to set your media query to dark! –  May 24 '20 at 09:11
  • How would I go about fixing that? –  May 24 '20 at 11:59
  • Take a look at my post on the first line you see: `@media (prefers-color-scheme: dark)`. The last word is **dark** that's what you want to use! @KyleSloper –  May 24 '20 at 13:03
  • Hi, does that only work with safari? To put it simply I need something that detects if dark-mode is being used and either ignores it (Dark mode will not effect the site) or tells the user to turn it off. –  May 28 '20 at 01:38
  • I have a site which already is dark, but since the new dark mode in Firefox, some colours are changed such breaks the overall style. How do I get rid of those unexpected changes? – rubo77 Oct 14 '20 at 03:34
  • @rubo77 See Brad his comment: "Welcome to the web, where you have little control over anything. Best thing to do is embrace it and work with what the user wants, rather than trying to fight it." –  Oct 14 '20 at 07:04