I'm trying to have the favicon change based on a browser's 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?
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.