Question

-2

how to prevent force dark mode by system?

rated 0 times [ 4] [ 6] / answers: 1 / hits: 22246 / 4 Years ago, mon, july 20, 2020, 12:00:00

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;

    }

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

byronkodyo

Add To Favorites

Follow

Total Points: 552

Total Questions: 87

Total Answers: 104

Location: Burundi

Member since Sat, Aug 21, 2021

3 Years ago

byronkodyo questions

1 Yarn 3.1, Vite 2.9, cannot find package vite

Wed, Jul 6, 22, 00:00, 2 Years ago

1 axios baseUrl not working in react when using process.env

Wed, Mar 17, 21, 00:00, 3 Years ago

1 Can you use an async function to set initial state with useState

Mon, Dec 21, 20, 00:00, 4 Years ago

1 can use useRef hook to empty the input value?

Mon, Sep 14, 20, 00:00, 4 Years ago

1 Angular 9 onclick function not defined

Thu, May 21, 20, 00:00, 4 Years ago

View All

answered 4 Years ago aubriea · Accepted Answer

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