Change favicon based on color scheme

[tijsluitse]

Hi is it possible to change the favicon based on the color scheme? I have created this webhook in my SEO component. But it's not changing. The listener is working though.

useEffect(() => { window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => setDarkMode(e.matches)) return () => { window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', e => setDarkMode(e.matches)) } }, [])

Thanks in advance!

[ayozebarrera]

You could save in the state if your theme is dark or light and then, in the render of your component, render <Helmet> with de icon

const favIcon = isDark ? "/dark-favicon.ico" : "/light-favicon.ico";

<Helmet>
   <link id="favicon" rel="icon" href={favIcon} type="image/x-icon"/>
</Helmet>