임베드된 Discourse에서 다크 모드와 밝은 흰색 모드로 전환하는 방법

[mikeguo (Mike)]

제 웹사이트에는 다크 모드 버튼이 제공되며, 이 버튼을 클릭할 때 제 웹사이트와 동일한 색상 테마를 유지하도록 Discourse 임베드의 색상 테마를 변경해야 합니다.

그러나 임베드된 iframe의 body에 클래스를 추가하려고 하면 iframe.contentDocument가 항상 null로 반환되며, document.getElementById("discourse-embed-frame").contentWindow.document를 사용하면 다음과 같은 오류가 발생합니다:

임베드된 프레임이 크로스 오리지널(cross-origin)을 허용하도록 설정하는 방법이 있을 것 같지만, 여러 설정을 시도해 보았음에도 아직 어떻게 설정해야 하는지 찾지 못했습니다.

다른 방법으로는 postMessage를 사용하는 것이 있을 수 있습니다. 예를 들어 document.getElementById("discourse-embed-frame").contentWindow.postMessage("darkMode")처럼 사용할 수 있지만, 이 경우 스크립트에서 darkMode 메시지를 처리하는 핸들러가 필요합니다. 이 핸들러를 어디에 추가해야 하는지 아직 찾지 못했습니다.

[kirupa (Kirupa Chinnathambi)]

저도 비슷한 문제에 직면해 있습니다. 우회 방법을 찾으셨나요?

크로스오리진(CORS) 문제 때문에, 내장된 CSS가 어떤 색상을 사용할지 판단할 수 있도록 iframe에 마커를 추가할 수 없습니다:

[mikeguo (Mike)]

아직 해결되지 않았습니다. 공식적인 답변도 받지 못해서, 모든 공식 담당자들이 휴가 중인지 모르겠습니다.

[kirupa (Kirupa Chinnathambi)]

(공식 가이드라인이 있는지 확인하려고 친근하게 한 번 더 올립니다 )

[satonotdead]

공식적인 방법이 있지만, 공식 테마에만 적용됩니다: Styling of Embedded Discourse

아래 링크가 도움이 될 수 있습니다:

app/assets/stylesheets/embed.scss

[mikeguo (Mike)]

공식 최신 기능을 사용하여 구현했습니다.
아직 요구사항이 있으시면 다음 링크를 참고하세요.

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

postMessage를 사용하여 구현했습니다. 코드와 실행 로직은 다음과 같습니다: [image] 코드 블록 ①은 임베디드 Discourse iframe에 이벤트 리스너를 추가하여, 임베디드 Discourse가 로드되면 임베디드 Discourse iframe이 포함된 내 웹사이트로 메시지를 전송하도록 합니다. 내 웹사이트가 임베디드 Discourse에서 메시지를 수신하면 코드 블록 ②에 표시된 바와 같이 유효성 검사를 수행하고, 통과하면 setIframeStyle 함수를 호출하여 임베디드 Discourse를 설정합니다. 코드 블록 ③에 표시된 setIframeStyle 함수는 postMessage를 호출하여 iframe에 색상 모드(“dark” 또는 “light”)를 전달합니다. 또한 다크 모드가 전환되면 이 함수가 호출되어 임베디드 Discourse가 내 웹사이트와 동일한 색상 모드를 유지할 수 있도록 합니다. 코드 블록 ④는 임베디드 Discourse가 내 웹사이트에서…