Skip to main content

Docusaurus utterances 다크 모드 적용

코드

/src/components/HomepageFeatures/Comment.js에 아래 코드 몇 줄을 추가해 주세요.

import React, { useEffect, useRef } from "react";
import { useColorMode } from "@docusaurus/theme-common";

function Comment() {
const containerRef = useRef(null);
const { colorMode } = useColorMode();

useEffect(() => {
const createUtterancesEl = () => {
const script = document.createElement("script");

script.src = "https://utteranc.es/client.js";
script.setAttribute("repo", "hanarotg/hanarotg.github.io");
script.setAttribute("issue-term", "title");
script.setAttribute("label", "comment");
script.setAttribute(
"theme",
colorMode == "light" ? "github-light" : "github-dark"
);
script.crossOrigin = "anonymous";
script.async = true;

containerRef.current.appendChild(script);
};

createUtterancesEl();
}, []);

return <div ref={containerRef} />;
}

export default Comment;

참고 자료

warning

아래 링크에 소개된 방법은 docusaurus 최신버전에서 작동하지 않습니다.