Function ThemeProvider

app/components/ThemeProvider.tsx:18–69

({
  children,
  specifiedTheme,
  themeOverride,
}: {
  children: ReactNode;
  specifiedTheme?: Theme;
  themeOverride?: Theme;
})

  window.matchMedia(prefersLightMQ).matches ? "light" : "dark";

export function ThemeProvider({
  children,
  specifiedTheme,
  themeOverride,
}: {
  children: ReactNode;
  specifiedTheme?: Theme;
  themeOverride?: Theme;
}) {
  const [theme, setTheme] = useState<Theme | undefined>(() => {
    if (specifiedTheme) {
      if (specifiedTheme === "light" || specifiedTheme === "dark") {
        return specifiedTheme;
      } else {
        return;
      }
    }

    // there's no way for us to know what the theme should be in this context
    // the client will have to figure it out before hydration.
    if (typeof window !== "object") {
      return;
    }

    return getPreferredTheme();
  });

  const mountRun = useRef(false);
  const persistTheme = useFetcher();

  useEffect(() => {
    if (!mountRun.current) {
      mountRun.current = true;
      return;
    }

    if (!theme) {
      return;
    }

    persistTheme.submit(
      { theme },
      { action: "actions/setTheme", method: "post" }
    );
  }, [theme]);

  return (
    <ThemeContext.Provider value={[themeOverride ?? theme, setTheme]}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme(): ThemeContextType {
  const context = useContext(ThemeContext);