how to prevent force dark mode by system?

Dark/Light mode toggle settings on websites and app are tredning 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 chrome?

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;
    }
}

Answer

Google has released an article explaining different methods for enabling forced dark mode, and strategies to handle dem 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