Use compliance page logos for favicon and org sidebar

Signed-off-by: Émile Ré <emile@getprobo.com>

packages/hooks/src/useSystemTheme.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+export function useSystemTheme(): "light" | "dark" {
+  const getSystemTheme = () => {
+    if (typeof window !== "undefined" && window.matchMedia) {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" as const;
+    }
+    return "light" as const;
+  };
+
+  const [theme, setTheme] = useState<"light" | "dark">(getSystemTheme());
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (event: MediaQueryListEvent) => {
+      setTheme(event.matches ? "dark" : "light");
+    };
+
+    mediaQuery.addEventListener("change", handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, []);
+
+  return theme;
+};