Function MyApp

src/pages/_app.tsx:23–82

({ Component, pageProps: { session, ...pageProps } }: AppProps<{ session: Session }>)

import type { Session } from "next-auth";

function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps<{ session: Session }>) {
  const { i18n } = useTranslation();
  const settingStore = useSettingStore();

  // Check whether those NEXT_PUBLIC_ envs are properly exposed in frontend.
  // See https://github.com/vercel/next.js/discussions/17641
  console.log("Has database:", hasDatabase());

  useEffect(() => {
    const darkMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    const handleColorSchemeChange = (e: MediaQueryListEvent) => {
      if (settingStore.getState().setting.theme === "system") {
        const theme = e.matches ? "dark" : "light";
        document.documentElement.classList.remove("dark");
        document.documentElement.classList.remove("light");
        document.documentElement.classList.add(theme);
      }
    };

    try {
      if (darkMediaQuery.addEventListener) {
        darkMediaQuery.addEventListener("change", handleColorSchemeChange);
      } else {
        darkMediaQuery.addListener(handleColorSchemeChange);
      }
    } catch (error) {
      console.error("failed to initial color scheme listener", error);
    }
  }, []);

  useEffect(() => {
    const locale = settingStore.setting.locale;
    i18n.changeLanguage(locale);
    document.documentElement.setAttribute("lang", locale);
  }, [settingStore.setting.locale]);

  useEffect(() => {
    const theme = settingStore.setting.theme;
    let currentAppearance = theme;
    if (theme === "system") {
      if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
        currentAppearance = "dark";
      } else {
        currentAppearance = "light";
      }
    }

    document.documentElement.classList.remove("dark");
    document.documentElement.classList.remove("light");
    document.documentElement.classList.add(currentAppearance);
  }, [settingStore.setting.theme]);

  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
      <Toaster />
      <Analytics />
    </SessionProvider>