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

user_9965529 0
Viewed 776

I'm trying to have the favicon change based on a browsers theme. I have tried window.matchMedia('(prefers-color-scheme: dark)').matches but this seems to only detect the computers color theme, not the browser. Is it possible to get just the browsers theme?

html jquery javascript
1 Answers

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.

user_129896720
Related