За замовчуванням 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