L’ho implementato utilizzando postMessage. Il codice e la sua logica di esecuzione sono i seguenti:
Il blocco di codice ① aggiunge un listener di eventi nell’iframe Discourse incorporato che invierà un messaggio al mio sito web che contiene l’iframe Discourse incorporato una volta che Discourse incorporato sarà caricato.
Quando il mio sito web riceve un messaggio da Discourse incorporato, effettuerà una validazione, come mostrato nel blocco di codice ②, e se superata, chiamerà la funzione setIframeStyle per impostare Discourse incorporato.
La funzione setIframeStyle, mostrata nel blocco di codice ③, passa la modalità colore, “dark” o “light”, all’iframe chiamando postMessage. Inoltre, una volta attivata la modalità scura, la funzione può essere chiamata per mantenere Discourse incorporato con la stessa modalità colore del mio sito web.
Il blocco di codice ④ consente a Discourse incorporato di elaborare il messaggio della modalità colore inviato dal mio sito web. Qui cambio la modalità colore cambiando il nome della classe nel tag body.
Inoltre, i blocchi di codice ① e ④ sono aggiunti dalla pagina di amministrazione di Discourse, come segue:
E le classi CSS personalizzate dovrebbero essere aggiunte come segue:
