All files / src/hooks useFavicon.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
 
3x
3x
3x
 
3x
4x
4x
12x
12x
 
 
 
 
 
3x
3x
3x
 
 
 
import { useEffect } from "react";
 
export function useFavicon() {
  useEffect(() => {
    const links = document.querySelectorAll<HTMLLinkElement>("link[rel~='icon']");
    const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
 
    const updateFavicon = (e?: MediaQueryListEvent) => {
      const isDark = e ? e.matches : darkQuery.matches;
      links.forEach(link => {
        const size = link.getAttribute("sizes") || "32x32";
        link.href = isDark
          ? `/favicons/favicon-dark-${size}.png`
          : `/favicons/favicon-light-${size}.png`;
      });
    };
 
    updateFavicon();
    darkQuery.addEventListener("change", updateFavicon);
    return () => darkQuery.removeEventListener("change", updateFavicon);
  }, []);
}