Aprenda a restablecer fácilmente el esquema de color de Disqus.

Cómo restablecer el esquema de color de Disqus automáticamente

En noviembre de 2021, se implementó un nuevo diseño en el blog que permite a los usuarios cambiar rápidamente entre el esquema claro y oscuro. Todo funciona como se esperaba, excepto por un pequeño detalle en el blog, la sección de comentarios alojada en Disqus. El componente Disqus permite a los usuarios publicar fácilmente un comentario en el blog y en otras plataformas que usan el mismo servicio, funciona muy bien y se ha implementado en el blog desde el principio. Solo hasta hoy encontré un problema al cambiar el esquema de luz y oscuridad de mi blog. Si el sitio web está cargado con el esquema negro y cambio el claro, Disqus no actualiza la interfaz de usuario y permanece con el esquema anterior, aunque usted lo define para que se establezca automáticamente de acuerdo con el esquema de color del sitio web en el panel de control. de Disqus:

Color Scheme Disqus Control Panel

Hasta la fecha, sigue siendo un error que es bastante problemático para algunas personas, pero, seamos honestos, es mejor así; de lo contrario, imagina un script ejecutándose en segundo plano verificando el esquema de color cada x segundos para ver si el tema anterior tiene cambiado o no. Vale la pena mencionar que esto sucede solo cuando la implementación del esquema claro y oscuro se realiza localmente en lugar de recargar toda la página, ya que los componentes de Disqus identifican el esquema correcto cada vez que se carga desde cero.

En este artículo, le mostraré cómo resolver fácilmente este problema con unas pocas líneas de JavaScript.

1. Identifica la lógica que cambia el tema de tu proyecto.

Lo primero que debe hacer es identificar la lógica de JavaScript que permite al usuario cambiar entre un esquema de color. Por ejemplo, imagina que tienes una casilla de verificación, cuando está marcada, se usa el esquema oscuro, de lo contrario no. El ejemplo es un poco tonto pero, ya sabes, fácil de entender:

// Lógica personalizada que cambia el tema al hacer clic en el esquema de cambio de botón
function YourFunctionThatSwitchesTheColorScheme(){
    let checkbox = document.getElementById("dark_theme");
    
    if (checkbox.checked) {
        // Tu código personalizado para configurar el tema oscuro
    } else {
        // Tu código personalizado para configurar el tema claro
    }
}

Una vez que identifique esto, debe enviar un nuevo evento al final de este método en el documento. El nombre del evento puede ser el que quieras, la idea es que reaccionarás a este evento más adelante en la vista donde se carga Disqus. Su método ahora se verá más o menos así enviando el método al final:

// Lógica personalizada que cambia el tema al hacer clic en el esquema de cambio de botón
function YourFunctionThatSwitchesTheColorScheme(){
    let checkbox = document.getElementById("dark_theme");

    if (checkbox.checked) {
        // Tu código personalizado para configurar el tema oscuro
    } else {
        // Tu código personalizado para configurar el tema claro
    }

    // Importante: crea un nuevo evento y envía
    let event = new Event('colorSchemeChanged');
    document.dispatchEvent(event);
}

2. Identificar dónde se inicializa Disqus

Ahora, en teoría, cuando el usuario hace clic en la casilla de verificación para cambiar el esquema de color del sitio web, el evento se enviará en el documento y podrá reaccionar cuando se active en la vista donde carga Disqus como de costumbre. Debe encontrar dónde se inicializa Disqus en su proyecto, por ejemplo, el código que inicializó Disqus se ve así:

<div id="disqus_thread"></div>
<script>
    var disqus_config = function () {
        this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };

    (function() {
        var d = document, s = d.createElement('script');
        s.src = 'https://SITE_URL.disqus.com/embed.js'; // Replace SITE_URL with your site's URL
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

Una vez que sepa esto, continúe con el último paso.

3. Reaccionar al evento colorSchemeChanged

Finalmente, agregue el siguiente detector de eventos que reaccionará al evento que creamos en el primer paso cuando se envíe. Una vez que se activa el evento, puede llamar al método de reinicio desde la variable DISQUS global en la ventana, lo que obliga a volver a renderizar el componente disqus y, por lo tanto, corregir el esquema de color:

// Cambio de tema de Disqus
document.addEventListener('colorSchemeChanged', function (e) {
    if (document.readyState == 'complete') {
        DISQUS.reset({ reload: true, config: disqus_config });
    }
});

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores