Prema zadanim postavkama, FastComments će automatski otkriti ima li vaša stranica tamnu pozadinu na temelju "udaljenosti od crne" u krugu boja.

Naši proizvodi daju sve od sebe u tome, međutim postoji gotovo beskonačno boja u krugu boja i mogu postojati scenariji u kojima aplikacija odabire korištenje tamnog načina rada kada to nije prikladno, i obrnuto. Ova dokumentacija pokriva kako imati precizniju kontrolu nad tim.

Tehnički detalji

Otkrivamo tamni način rada prolazeći kroz elemente na stranici prema gore od widgeta za komentare, tražeći tamnu pozadinu kada se widget inicijalno učita.

Za prebacivanje tamnog načina rada nakon ovog koraka, morate pozvati widget da ažurira svoju konfiguraciju. To je pokriveno u odjeljku Ručna konfiguracija.

Za WordPress Networker temu moramo dodati prilagođeni kod u našu WordPress instalaciju za automatsko otkrivanje tamnog načina rada i ažuriranje widgeta za komentare.

Kod se mora umetnuti u podnožje vaše stranice. Postoji dosta dodataka koji to mogu učiniti, pa ih nećemo ovdje nabrajati. Međutim, evo koda za dodavanje:

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