javascriptcssgoogle-chrome

how to prevent force dark mode by system?

Dark/Light mode toggle settings on websites and app are trending and there is a some system default theme mode also available like chrome dev-tools provide force dark-mode, but I want my website to be view in the way it has been built. So, How do I prevent the force dark-mode, applied by the browser?

I have tried prefers-color-scheme media query, but I guess, I'm doing something wrong or missing something.

@media (prefers-color-scheme: dark) {
    body {
        background: #fff;
    }
}
Solution

  • Google has released an article explaining different methods for enabling forced dark mode, and strategies to handle them both by JavaScript and CSS.

    https://developer.chrome.com/blog/auto-dark-theme/#detecting-auto-dark-theme

    By forcing dark mode in Chrome you can do dark mode detection, and they have included an opt-out CSS property.

    :root {
  color-scheme: only light;
}

    Or on specific items:

    #my-onlylight-element {
  color-scheme: only light;
}

    This is seemingly also supported by Safari (Chrome information in this table is outdated, bug has been reported on that): https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme