Firefox: How to Test Prefers-Color-Scheme

Firefox not respecting user media(prefers-color-scheme: dark)

I am of the opinion that you can't do that or only in part to get/read.

You will not get the right settings for the mode selection on OS level with the browser every time for every user.

You got different os's & browser's with different settings what the browser will share.

Check this:

The method by which the user expresses their preference can vary. It might be a system-wide setting exposed by the Operating System, or a setting controlled by the user agent.

Detecting the desire for light or dark color schemes: the prefers-color-scheme feature

How to detect if OS X is in dark mode?

How to detect if the OS is in dark mode in browsers?

How do I detect dark mode using JavaScript?

How can I emulate prefers-color-scheme media query in Chrome?

Since Chrome version 79 you can toggle between prefers-color-scheme: dark and prefers-color-scheme: light from the Rendering panel

1. Open Developer tools (otherwise the key combination below opens the print dialog)
2. Open the Command Control: Ctrl+Shift+P or Command+Shift+P (Mac)
3. Type "Show rendering"
4. Set the Emulate CSS media feature prefers-color-scheme to the value you want to debug

CSS prefers-color-scheme works on Firefox but not on Chrome issue

Chrome only offers support for prefers-color-scheme starting with Chrome version 76, which was released July 30th 2019 (5 days ago from the time of this post). Updating your Chrome to the latest version will show your code applying the prefers-color-scheme correctly.

You can update Chrome by clicking the three dots in the top-right, then help, then About Google Chrome. This will inform you of your current Chrome version, and prompt an automatic update if you do not have the latest version:

You can check the support for prefers-color-scheme at CanIUse, which shows that Edge, Firefox, Chrome and Safari all support prefers-color-scheme under the latest respective versions:

To check whether your browser supports prefers-color-scheme, the following snippet will be red under a dark theme, blue under a light theme, and white if your browser does not support prefers-color-scheme:

@media (prefers-color-scheme: dark) {  html {    background-color: red;  }}
@media (prefers-color-scheme: light) {  html {    background-color: blue;  }}

prefers-color-scheme default styles vs light

Yes, light color scheme is default on most devices and browsers. Also adding @media with light color scheme won't change anything since there are no other color schemes than light and dark.

Firefox Refuses to Honor Dark Mode

I got it working setting ui.systemUsesDarkTheme: 1 in the about:config
as described here https://github.com/mdn/browser-compat-data/pull/9299

How to detect whether `prefers-color-scheme` is supported on OS?

If you want to detect the support JavaScript wise, one idea would be to set a variable in CSS, update its value in the media query for prefers-color-scheme and read that CSS variable with JavaScript.

How can my website detect if a browser is using a dark/light theme NOT if the OS is using a theme

You're mistaken, prefers-color-scheme ALSO gets the preference of the browser's theme — but not in the way you think. If you're thinking about those browser themes you find on the Chrome Web Store or Firefox's Add-On Store, unfortunately, none of the current browsers implement in such that it accommodates for WebExtensions.

prefers-color-scheme gets the theme from the OS, but ALSO the browser if its overridden or behind a user preference. On Firefox, adding ui.systemUsesDarkTheme to about:config and setting it to 0 always makes (prefers-color-scheme: dark) true regardless of the OS's preference. On Android, the Samsung Browser I believe has a option in three dots menu to enable dark mode all the time, which also overrides Android's settings. So, continue using prefers-color-scheme and expect future browsers to do what you're looking for.

---

Related Topics