Je l’ai implémenté en utilisant postMessage. Les codes et leur logique d’exécution sont les suivants :
Le bloc de code ① ajoute un écouteur d’événements dans l’iframe Discourse intégrée qui enverra un message à mon site Web contenant l’iframe Discourse intégrée une fois que Discourse intégrée sera chargée.
Lorsque mon site Web reçoit un message de Discourse intégrée, il effectuera une validation, comme montré dans le bloc de code ②, et si elle réussit, appellera la fonction setIframeStyle pour définir Discourse intégrée.
La fonction setIframeStyle, juste montrée dans le bloc de code ③, transmet le mode couleur, « dark » ou « light », à l’iframe en appelant postMessage. De plus, une fois le mode sombre activé, la fonction peut être appelée pour maintenir Discourse intégrée dans le même mode couleur que mon site Web.
Le bloc de code ④ permet à Discourse intégrée de pouvoir traiter le message de mode couleur envoyé depuis mon site Web. Ici, je bascule le mode couleur en changeant le nom de classe du tag body.
De plus, les blocs de code ① et ④ sont ajoutés par la page d’administration de Discourse, comme ci-dessous :
Et des classes CSS personnalisées doivent être ajoutées comme ci-dessous :
