4

I am using MediaWiki's Timeless CSS with the media query @media(prefers-color-scheme: dark) in order to display a dark site version to users who have a dark mode selection at the Operating System level.

When I switch Dark or Light mode preference via Windows, the site will automatically change in Chrome. However, in Firefox it always displays the dark version, no matter the OS preference. Why is this so?

TylerH
  • 20,799
  • 66
  • 75
  • 101
greektranslator
  • 499
  • 1
  • 6
  • 19
  • Is this in a media attribute of a element? If so, do you have another resource link in your HTML or just this one? Or is this as a media query inside of the CSS file? It would really help to see a [mcve] here. – TylerH Apr 12 '23 at 20:47

1 Answers1

1

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?

Z0OM
  • 1
  • 4
  • 18
  • 29
  • 1
    Looks like it was more complex than I thought. Testing with FF, if FF dark theme is enabled, then it ignores OS-level preference and displays dark site theme even if OS preference is for Light. – greektranslator Apr 15 '22 at 13:06
  • @greektranslator you grep more? found a solution? – Z0OM Apr 20 '22 at 18:40