[Docusaurus] Utterances 다크 모드 적용하기

개요 

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;

 

참고 자료 

Theme configuration | Docusaurus

Docusaurus Canary - Can't resolve useThemeContext · Issue #116 · rohit-gohri/redocusaurus

아래 블로그 글은 많은 도움 되었지만 현재 Docusaurus 버전에서 적용되는 방법은 아닙니다. 

Docusaurus로 문서 관리하기 - 2