임베드된 댓글에도 자동 다크 모드가 적용되나요?

기여 기능
19

위 방법이 여전히 작동한다는 것을 확인했습니다. 다만 스크린샷에서 코드를 직접 입력하지 않아도 되었으면 좋았을 텐데 말이죠 :slight_smile: 그래서 약간 업데이트한 코드를 여기에 올립니다:

단계

  1. 댓글 iframe이 렌더링을 완료하면 메인 브라우저 윈도우에 이를 알리는 메시지를 전송합니다.
  2. 브라우저가 현재 다크/라이트 모드 설정을 조회하여 해당 값을 iframe으로 되돌려 보냅니다.
  3. iframe이 메시지를 수신하고, 다크/라이트 모드 설정에 따라 data-attribute, 클래스 또는 유사한 속성을 설정합니다.

코드

  1. iframe이 로드되면 부모 윈도우에 알림을 전송합니다. 이 코드는 Discourse에서 Admin -> Customize -> (테마 선택) -> Edit CSS/HTML -> Embedded Header 아래에 입력해야 합니다.
<script type="text/javascript">
    window.addEventListener("load", (event) => {
        window.parent.postMessage("iframe loaded", "*");
    }, false);
</script>
  1. 메인 윈도우에서 이 수신 트리거를 처리합니다. 이 코드는 자신의 블로그 사이트에 위치해야 합니다:
<script type="text/javascript">
  const discourse_url = "https://your.discourse-instance.org";

  // 여기서 테마를 결정하고, iframe에 테마가 무엇인지 알리는 메시지를 전송합니다.
  // notifyFrameStyle 연결 방법은 아래를 참조하세요.
  const notifyIFrameOfTheme = () => {
    const iframe = document.getElementById("discourse-embed-frame");
    if (iframe && iframe.contentWindow) {
      iframe.contentWindow.postMessage(
        {
          // 다크 모드 설정을 저장하는 방식에 따라 아래 줄을 수정하여 설정을 가져오세요.
          theme: document.documentElement.getAttribute("data-theme")
        },
        discourse_url
      );
    }
  };

  // "iframe loaded" 메시지를 수신할 때 setFrameStyle을 호출합니다.
  const handleMessageListener = (event) => {
    var origin = event.origin;
    if ((origin === discourse_url) && (event.data == "iframe loaded")) {
      notifyIFrameOfTheme();
    }
  };
</script>
  1. (1)의 <script> 블록에 notifyFrameStyle이 전송하는 테마 메시지 리스너를 추가합니다:
    window.addEventListener("message", (event) => {
        const payload = event.data;
        if (payload.theme) {
          // 테마 설정으로 무언가를 수행합니다. 저는 iframe의 <html>에 `data-theme` 속성을 설정했지만,
          // 클래스 속성이나 유사한 것을 설정하는 것이 더 나을 수도 있습니다.
          document.documentElement.setAttribute("data-theme", payload.theme);
        }
    }, false);

스타일링

Admin -> Customize -> (테마 선택) -> Edit CSS/HTML -> Embedded CSS에서 이제 각 모드별로 CSS를 제공할 수 있습니다. 예를 들어, Discourse 스타일링 변수를 오버라이드할 수 있습니다:

html[data-theme="dark"] {
  --primary: #ced6dd;
  --primary-low: #48566b;
  --secondary: #14181e;
  --tertiary: #2b7e8d;
}

도움이 되길 바랍니다!

6개의 좋아요