Standaard zal FastComments automatisch detecteren of uw site een donkere achtergrond heeft op basis van de "afstand van zwart" in de kleurencirkel.

Onze producten doen hun best hierbij, maar er zijn bijna oneindig veel kleuren in het kleurenwiel, en er kunnen scenario's zijn waarin de applicatie ervoor kiest om donkere modus te gebruiken wanneer dit niet geschikt is, en vice versa. Deze documentatie behandelt hoe u meer gedetailleerde controle hierover kunt krijgen.

Technische details

We detecteren donkere modus door de elementen op de pagina omhoog te doorlopen vanaf de reactie-widget, op zoek naar een donkere achtergrond wanneer de widget voor het eerst wordt geladen.

Om donkere modus na deze stap te schakelen, moet u de widget aanroepen om de configuratie bij te werken. Dit wordt behandeld in de sectie Handmatige configuratie.

Voor het WordPress Networker thema moeten we aangepaste code toevoegen aan onze WordPress-installatie om automatisch donkere modus te detecteren en de reactie-widget bij te werken.

De code moet worden ingevoegd in de footer van uw site. Er zijn veel plugins die dit kunnen doen, dus we zullen ze hier niet opsommen. Hier is echter de code om toe te voegen:

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