Lo he implementado usando postMessage. Los códigos y su lógica de ejecución son los siguientes:
El bloque de código ① agrega un detector de eventos en el iframe de Discourse incrustado que enviará un mensaje a mi sitio web que contiene el iframe de Discourse incrustado una vez que Discourse incrustado se cargue.
Cuando mi sitio web reciba el mensaje de Discourse incrustado, realizará una validación, como se muestra en el bloque de código ②, y si pasa, llamará a la función setIframeStyle para configurar Discourse incrustado.
La función setIframeStyle, que se muestra en el bloque de código ③, pasa el modo de color, “oscuro” o “claro”, al iframe llamando a postMessage. Además, una vez que se cambie el modo oscuro, la función se puede llamar para mantener Discourse incrustado con el mismo modo de color que mi sitio web.
El bloque de código ④ permite que Discourse incrustado pueda procesar el mensaje del modo de color enviado desde mi sitio web. Aquí cambio el modo de color cambiando el nombre de la clase a la etiqueta del cuerpo.
Además, los bloques de código ① y ④ se agregan a través de la página de administración de Discourse, como se muestra a continuación:
Y las clases CSS personalizadas deben agregarse de la siguiente manera:
