Par défaut, FastComments détectera automatiquement si votre site a un arrière-plan sombre basé sur la « distance du noir » dans le cercle des couleurs.

Nos produits font de leur mieux à cet égard, cependant il y a presque une infinité de couleurs dans la roue des couleurs, et il peut y avoir des scénarios où l'application choisit d'utiliser le mode sombre alors que ce n'est pas approprié, et vice-versa. Cette documentation couvre comment avoir un contrôle plus précis sur cela.

Détails techniques

Nous détectons le mode sombre en parcourant les éléments de la page vers le haut depuis le widget de commentaires, en recherchant un arrière-plan sombre lorsque le widget se charge initialement.

Pour basculer le mode sombre après cette étape, vous devez appeler le widget pour mettre à jour sa configuration. Ceci est couvert dans la section Configuration manuelle.

Pour le thème WordPress Networker, nous devons ajouter du code personnalisé à notre installation WordPress pour détecter automatiquement le mode sombre et mettre à jour le widget de commentaires.

Le code doit être inséré dans le pied de page de votre site. Il existe plusieurs plugins qui peuvent le faire, donc nous ne les énumérerons pas ici. Cependant, voici le code à ajouter:

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