Eu implementei usando postMessage. Os códigos e sua lógica de execução são os seguintes:
O bloco de código ① adiciona um ouvinte de eventos no iframe incorporado do Discourse, que enviará uma mensagem para o meu site que contém o iframe incorporado do Discourse assim que o Discourse incorporado for carregado.
Quando meu site recebe a mensagem do Discourse incorporado, ele fará uma validação, como mostrado no bloco de código ②, e se aprovado, chamará a função setIframeStyle para definir o Discourse incorporado.
A função setIframeStyle, mostrada no bloco de código ③, passa o modo de cor, “dark” ou “light”, para o iframe chamando postMessage. Além disso, uma vez que o modo escuro é alternado, a função pode ser chamada para manter o Discourse incorporado com o mesmo modo de cor do meu site.
O bloco de código ④ permite que o Discourse incorporado possa processar a mensagem do modo de cor enviada do meu site. Aqui eu alterno o modo de cor trocando o nome da classe para a tag body.
Adicionalmente, os blocos de código ① e ④ são adicionados pela página de administração do Discourse, como abaixo:
E as classes CSS personalizadas devem ser adicionadas como abaixo:
