По умолчанию FastComments автоматически определяет, имеет ли ваш сайт тёмный фон, на основе "расстояния от чёрного" в цветовом круге.

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

Технические детали

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

Чтобы переключить тёмный режим после этого шага, вы должны вызвать виджет для обновления его конфигурации. Это описано в разделе Ручная настройка.

Для темы WordPress Networker нам нужно добавить пользовательский код в нашу установку WordPress для автоматического определения тёмного режима и обновления виджета комментариев.

Код должен быть вставлен в подвал вашего сайта. Существует множество плагинов, которые могут это сделать, поэтому мы не будем их перечислять. Однако вот код для добавления:

Networker Theme Dark Mode Support Script

Copy

1

2(function () {

3 let isDarkMode = false;

4

5 function setIsDarkMode(newValue) {

6 isDarkMode = newValue;

7 for (const instance of window.fcUIInstances) {

8 if (instance.targetElement) {

9 const config = instance.config;

10 config.hasDarkBackground = isDarkMode;

11 instance.instance.update(config)

12 }

13 }

14 }

15

16 function getDarkModeSetting() {

17 return document.body.attributes['data-scheme'].value === 'dark';

18 }

19 let initialValue = getDarkModeSetting();

20 if (isDarkMode !== initialValue) {

21 setIsDarkMode(initialValue);

22 }

23 const observer = new MutationObserver(function (mutations) {

24 mutations.forEach(function (mutation) {

25 if (mutation.type === "attributes") {

26 const newValue = getDarkModeSetting();

27 if (isDarkMode !== newValue) {

28 setIsDarkMode(newValue);

29 }

30 return false;

31 }

32 });

33 });

34

35 observer.observe(document.body, {

36 attributes: true

37 });

38})();

39