Por defecto, FastComments detectará automáticamente si su sitio tiene un fondo oscuro basándose en la "distancia del negro" en el círculo de colores.

Nuestros productos hacen lo mejor que pueden en esto, sin embargo, hay casi infinitos colores en la rueda de colores, y puede haber escenarios donde la aplicación elige usar el modo oscuro cuando no es apropiado, y viceversa. Esta documentación cubre cómo tener un control más detallado sobre esto.

Detalles técnicos

Detectamos el modo oscuro recorriendo los elementos de la página hacia arriba desde el widget de comentarios, buscando un fondo oscuro cuando el widget se carga inicialmente.

Para alternar el modo oscuro después de este paso, debe llamar al widget para actualizar su configuración. Esto se cubre en la sección Configuración manual.

Para el tema WordPress Networker, tenemos que agregar código personalizado a nuestra instalación de WordPress para detectar automáticamente el modo oscuro y actualizar el widget de comentarios.

El código debe insertarse en el pie de página de su sitio. Hay bastantes plugins que pueden hacer esto, así que no los listaremos aquí. Sin embargo, aquí está el código para agregar:

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