Я реализовал это с помощью postMessage. Код и логика его выполнения приведены ниже:
Блок кода ① добавляет слушатель событий во встроенный iframe Discourse, который отправляет сообщение на мой сайт, содержащий встроенный iframe Discourse, сразу после его загрузки.
Когда мой сайт получает сообщение от встроенного Discourse, он выполняет проверку, как показано в блоке кода ②. Если проверка пройдена, вызывается функция setIframeStyle для настройки встроенного Discourse.
Функция setIframeStyle, показанная в блоке кода ③, передаёт режим цвета («dark» или «light») в iframe, вызывая postMessage. Кроме того, при переключении тёмного режима эту функцию можно вызывать, чтобы поддерживать в встроенном Discourse тот же режим цвета, что и на моём сайте.
Блок кода ④ позволяет встроенному Discourse обрабатывать сообщения о режиме цвета, отправляемые с моего сайта. Здесь я переключаю режим цвета, меняя имя класса у тега body.
Кроме того, блоки кода ① и ④ добавлены через страницу администратора Discourse, как показано ниже:
А пользовательские CSS-классы должны быть добавлены следующим образом:
