Open tijsluitse opened 4 years ago
You could save in the state if your theme is dark or light and then, in the render of your component, render
const favIcon = isDark ? "/dark-favicon.ico" : "/light-favicon.ico";
<Helmet>
<link id="favicon" rel="icon" href={favIcon} type="image/x-icon"/>
</Helmet>
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!