По подразбиране 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