I'm designing my website to adapt the favicon based on the user's light or dark mode preference. It works just fine in Chrome and Edge, but Firefox seems to completely ignore the `prefers-color-scheme` setting. Here's the code I'm using for the favicons:
``
``
Is there something wrong with my setup, or is Firefox just quirky when handling this feature?
2 Answers
Honestly, this is why I prefer developing with Chrome. I’d say focus on the most popular browsers for web development, like Chrome, Edge, and Safari, since they tend to have more reliable support for features like these.
When you're dealing with something that isn't working as expected, it's always a good idea to check the MDN web docs for browser compatibility. It looks like there are known issues with Firefox not properly handling the `prefers-color-scheme`. They consider it an enhancement, which means it could be a long wait (like 5 years and counting) before it gets fixed. You can check out the details in their bug tracker here: https://bugzil.la/1603885.
Wow, that’s surprising! I'd have expected it to work across the board.
That's a bit frustrating! Is there a workaround for now?