Как переключаться между темным режимом и ярким белым режимом во встроенном Discourse

Поддержка
1

Мой сайт предоставляет кнопку тёмной темы, поэтому при её нажатии мне нужно изменить цветовую тему встраиваемых элементов Discourse, чтобы она соответствовала моему сайту.

Однако при попытке добавить класс к элементу body внутри встроенного iframe я обнаружил, что iframe.contentDocument всегда равен null. Если же использовать document.getElementById("discourse-embed-frame").contentWindow.document, возникает следующая ошибка:

image
image1826×146 25.5 KB

Должен существовать способ настроить встроенный фрейм так, чтобы разрешить кросс-доменное взаимодействие, но, несмотря на несколько попыток, я так и не нашёл, как это сделать.

Другой вариант — использовать postMessage, например: document.getElementById("discourse-embed-frame").contentWindow.postMessage("darkMode"). Однако для этого нужен обработчик сообщений с типом darkMode в скрипте, и я пока не нашёл, куда его добавить.

2

У меня возникла похожая проблема. Вам удалось найти обходной путь?

Из-за проблемы с перекрёстным доступом (cross-origin) я не могу добавить какой-либо маркер во фрейм (iframe), который мой встроенный CSS мог бы использовать для определения необходимых цветов:

image
image1146×604 29.7 KB

4

Ещё не решено. Я тоже не получил официального ответа, поэтому не знаю, все ли официальные лица в отпуске.

6

(Дружелюбный bump, чтобы узнать, есть ли у нас какие-либо официальные рекомендации :slight_smile: )

7

Существует официальный способ, но он доступен только для официальных тем: Styling of Embedded Discourse

Это может помочь:

8

Используя последнюю официальную функцию, я реализовал это.
Если у вас остались пожелания, вы можете обратиться к