Como alternar entre o modo escuro e o modo branco brilhante no Discourse incorporado

Suporte
1

Meu site fornece o botão de modo escuro, então quando o botão é clicado, preciso alterar o tema de cores dos Discurso Embeds para manter o mesmo do meu site.

Mas quando tento adicionar uma classe ao corpo do iframe incorporado, descubro que iframe.contentDocument é sempre nulo e, se usar document.getElementById(\"discourse-embed-frame\").contentWindow.document, o erro é o seguinte:

image
image1826×146 25.5 KB

Acho que deve haver uma maneira de configurar o frame incorporado para permitir cross-origin, mas ainda não encontrei como configurar depois de tentar algumas configurações.

A outra maneira talvez seja usar postMessage, como document.getElementById(\"discourse-embed-frame\").contentWindow.postMessage(\"darkMode\"), mas precisa haver um manipulador para lidar com a mensagem darkMode no script, eu ainda não encontrei onde adicioná-la.

2

Estou tendo um desafio semelhante. Você conseguiu encontrar uma solução alternativa?

Por causa do problema de cross-origin, não consigo adicionar nenhum tipo de marcador no iframe que meu CSS incorporado possa usar para descobrir quais cores usar:

image
image1146×604 29.7 KB

4

Ainda não resolvido. Também não recebi uma resposta oficial, então não sei se todos os amigos oficiais estão de férias.

1 curtida
6

(Bump amigável para ver se temos alguma orientação oficial :slight_smile: )

1 curtida
7

Existe uma maneira oficial, mas apenas para temas oficiais: Styling of Embedded Discourse

Isso pode ajudar:

8

Usando o último recurso oficial, eu o implementei.
Se você ainda tiver requisitos, pode consultar