Domyślnie FastComments automatycznie wykryje, czy Twoja strona ma ciemne tło na podstawie "odległości od czerni" w kole kolorów.

Nasze produkty robią, co w ich mocy, jednak jest prawie nieskończona liczba kolorów w kole kolorów i mogą istnieć scenariusze, w których aplikacja wybiera tryb ciemny, gdy nie jest to odpowiednie, i odwrotnie. Ta dokumentacja opisuje, jak uzyskać bardziej szczegółową kontrolę nad tym.

Szczegóły techniczne

Wykrywamy tryb ciemny, przechodząc przez elementy na stronie w górę od widgetu komentarzy, szukając ciemnego tła podczas początkowego ładowania widgetu.

Aby przełączyć tryb ciemny po tym kroku, musisz wywołać widget, aby zaktualizować jego konfigurację. Jest to opisane w sekcji Konfiguracja ręczna.

Dla motywu WordPress Networker musimy dodać niestandardowy kod do naszej instalacji WordPress, aby automatycznie wykryć tryb ciemny i zaktualizować widget komentarzy.

Kod musi być wstawiony w stopce Twojej strony. Jest wiele wtyczek, które mogą to zrobić, więc nie będziemy ich tutaj wymieniać. Oto jednak kod do dodania:

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