Function ThemeProvider

app/_providers/ThemeProvider.tsx:10–147

({
  children,
  user,
}: {
  children: React.ReactNode;
  user: Partial<User>;
})

import { useTranslations } from "next-intl";

export const ThemeProvider = ({
  children,
  user,
}: {
  children: React.ReactNode;
  user: Partial<User>;
}) => {
  const { isRwMarkable } = useAppMode();
  const t = useTranslations();
  const { theme: localStorageTheme, getResolvedTheme } = useSettings();
  const [resolvedTheme, setResolvedTheme] = useState<string>(() =>
    getResolvedTheme(isRwMarkable, user.preferredTheme)
  );

  const themeIDs = BUILT_IN_THEMES.map((theme) => theme.id);

  const [customThemeColors, setCustomThemeColors] = useState<{
    [key: string]: any;
  }>({});

  const [customCSS, setCustomCSS] = useState<string>("");

  const loadCustomCSS = async () => {
    try {
      const timestamp = Date.now();
      const response = await fetch(`/api/custom-css?t=${timestamp}`);
      if (response.ok) {
        const css = await response.text();
        setCustomCSS(css);
      }
    } catch (error) {
      console.error("Failed to load custom CSS:", error);
    }
  };

  useEffect(() => {
    const loadCustomColors = async () => {
      try {
        const colors = await getCustomThemeColors();
        setCustomThemeColors(colors);
      } catch (error) {
        console.error("Failed to load custom theme colors:", error);
      }
    };

    loadCustomColors();
    loadCustomCSS();
  }, []);

  useEffect(() => {
    const handleCssUpdate = () => {
      loadCustomCSS();
    };

    window.addEventListener("css-updated", handleCssUpdate);

    return () => {
      window.removeEventListener("css-updated", handleCssUpdate);