Per impostazione predefinita, FastComments rileverà automaticamente se il tuo sito ha uno sfondo scuro basandosi sulla "distanza dal nero" nel cerchio dei colori.

I nostri prodotti fanno del loro meglio in questo, tuttavia ci sono quasi infiniti colori nella ruota dei colori, e potrebbero esserci scenari in cui l'applicazione sceglie di usare la modalità scura quando non è appropriata, e viceversa. Questa documentazione spiega come avere un controllo più preciso su questo.

Dettagli tecnici

Rileviamo la modalità scura attraversando gli elementi nella pagina verso l'alto dal widget dei commenti, cercando uno sfondo scuro quando il widget viene caricato inizialmente.

Per attivare/disattivare la modalità scura dopo questo passaggio, devi chiamare il widget per aggiornare la sua configurazione. Questo è trattato nella sezione Configurazione manuale.

Per il tema WordPress Networker, dobbiamo aggiungere codice personalizzato alla nostra installazione WordPress per rilevare automaticamente la modalità scura e aggiornare il widget dei commenti.

Il codice deve essere inserito nel footer del tuo sito. Ci sono diversi plugin che possono farlo, quindi non li elencheremo qui. Tuttavia, ecco il codice da aggiungere:

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