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