1
import Giscus from "@giscus/react";
2
import { useTheme } from "next-themes";
3
import { useEffect, useState } from "react";
4

5
export const Comment = () => {
6
  const { theme, systemTheme } = useTheme();
7
  const [giscusTheme, setGiscusTheme] = useState("light");
8

9
  useEffect(() => {
10
    // themeが'system'の場合は、システムのテーマに基づいてGiscusのテーマを決定
11
    const resolvedTheme = theme === "system" ? systemTheme : theme;
12

13
    // Giscusのテーマを設定
14
    setGiscusTheme(resolvedTheme === "dark" ? "dark" : "light");
15
  }, [theme, systemTheme]);
16

17
  return (
18
    <Giscus
19
      id="comments"
20
      repo={process.env.NEXT_PUBLIC_GISCUS_REPO}
21
      repoId={process.env.NEXT_PUBLIC_GISCUS_REPO_ID}
22
      category={process.env.NEXT_PUBLIC_GISCUS_CATEGORY}
23
      categoryId={process.env.NEXT_PUBLIC_GISCUS_CATEGORY_ID}
24
      mapping="pathname"
25
      reactionsEnabled="1"
26
      emitMetadata="0"
27
      inputPosition="bottom"
28
      theme={giscusTheme} // 動的にテーマを変更
29
    />
30
  );
31
};

1
const Giscus = dynamic(() => import("@/app/giscus").then((m) => m.Comment), {
2
  ssr: false,
3
});
4

5
export default function Home() {
6
  return (
7
    <main>
8
      <Giscus />
9
    </main>
10
  );
11
}