Ich habe es mit postMessage implementiert. Der Code und seine Ausführungslogik sind wie folgt:
Codeblock ① fügt einen Event-Listener in den eingebetteten Discourse-iframe ein, der eine Nachricht an meine Website sendet, die den eingebetteten Discourse-iframe enthält, sobald Discourse eingebettet ist.
Wenn meine Website eine Nachricht von eingebettetem Discourse empfängt, führt sie eine Validierung durch, wie in Codeblock ② gezeigt, und wenn diese erfolgreich ist, wird die Funktion setIframeStyle aufgerufen, um eingebettetes Discourse einzustellen.
Die Funktion setIframeStyle, die in Codeblock ③ gezeigt wird, übergibt den Farbmodus, „dark“ oder „light“, an den iframe, indem sie postMessage aufruft. Zusätzlich kann die Funktion aufgerufen werden, um den eingebetteten Discourse im gleichen Farbmodus wie meine Website zu halten, sobald der dunkle Modus umgeschaltet wird.
Codeblock ④ ermöglicht es eingebettetem Discourse, die von meiner Website gesendete Farbmodus-Nachricht zu verarbeiten. Hier schalte ich den Farbmodus um, indem ich den Klassennamen des Body-Tags ändere.
Zusätzlich werden Codeblock ① und ④ über die Discourse-Admin-Seite hinzugefügt, wie unten gezeigt:
Und benutzerdefinierte CSS-Klassen sollten wie folgt hinzugefügt werden:
