svg favicon in dark mode not working
I have an SVG icon that includes CSS to ensure the icon is drawn in white when the browser is in dark mode . However , I can 't get it to work . Here is the demo URL to test : https://start-test_svg_icon_in_dark_mode.toddle.site/ The favicon of your project appears to have been removed now ? 🤔 Anyway , I just tried the following in Chrome : - Opening the svg directly from our cdn https://nordcraft.com/cdn-cgi/imagedelivery/ZIty0Vhmkm0nD-fBKJrTZQ/test_svg_icon_in_dark_mode:JcvRzt6i.svg/32 - switching my browser between light /dark mode doesn 't affect the color of the svg - Downloading the file and opening it in Chdome - switching my browser between light /dark mode does affect the color of the svg 🤔 Do you experience the same ? Actually , I think I might have a solution : - From the findings above , it seemed that svg files hosted on Cloudflare ( /cdn -cgi / . . . ) did not respect the browser 's theme - I tried uploading the file to GitHub (see file here https://raw.githubusercontent.com/erik-beus/test/refs/heads/main/icon.svg ) - I used the url above for my project icon - Now , when I visit my app , the icon is black in light mode and white in dark mode - see app here https://start-gray_leia_organa_abundant_loon.toddle.site/ (it requires a refresh after switching the theme in Chrome ) I 'll check if we can safely upload svg images to Cloudflare , but perhaps the above could be a decent work -around for now 👍 @Patrick Mast if SVGs are being annoying you can do something like this : <head>
<link id="favicon" rel="icon" href="favicon-light.png" type="image/png">
<script>
function updateFavicon() {
const favicon = document.getElementById("favicon");
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
favicon.href = 'favicon-dark.png';
} else {
favicon.href = 'favicon-light.png';
}
}
updateFavicon();
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateFavicon);
</script>
</head>Read an article a while ago about someone making a whole video game in a favicon : ]
.jpeg/public)