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?
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.
I am trying to detect the default themes available in Firefox and Chrome but they aren't being detected. To test this in Firefox I have gone into the burger button -> customize -> theme -> dark/light. When I change the theme here in the browser it continues to only change my websites favicon when I change the Windows 10 computer settings theme. What am I missing here?
You're aren't missing anything. See bugzilla.mozilla.org/show_bug.cgi?id=1529323 which shows it is currently being implemented in Firefox, but has not been released yet. Continue using
prefers-color-scheme
like-so and future browser updates will have that behavior.