Por padrão, o FastComments detectará automaticamente se o seu site tem um fundo escuro com base na "distância do preto" no círculo de cores.

Nossos produtos fazem o melhor possível nisso, no entanto, há quase infinitas cores na roda de cores, e pode haver cenários onde a aplicação escolhe usar o modo escuro quando não é apropriado, e vice-versa. Esta documentação cobre como ter um controle mais refinado sobre isso.

Detalhes técnicos

Detectamos o modo escuro percorrendo os elementos na página para cima a partir do widget de comentários, procurando um fundo escuro quando o widget é carregado inicialmente.

Para alternar o modo escuro após esta etapa, você deve chamar o widget para atualizar sua configuração. Isso é coberto na seção Configuração manual.

Para o tema WordPress Networker, precisamos adicionar código personalizado à nossa instalação WordPress para detectar automaticamente o modo escuro e atualizar o widget de comentários.

O código deve ser inserido no rodapé do seu site. Existem vários plugins que podem fazer isso, então não vamos listá-los aqui. No entanto, aqui está o código para adicionar:

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