Toggling dark/light mode in disqus

user_11089758 0
Viewed 897

I have a website where I post articles. It's made up of Jekyll, and deployed by GitHub. The site has a button which switches light mode to dark mode and vice versa without any page refresh.

Today I have installed disqus code to it. And It comes with either dark or light mode. So I just added this to my toggler function:

const disqusThread = $('#disqus_thread')
const ps = $('#disqus_thread *')

tdm.onclick = function() {
    disqusThread.css('background-color', '#111')
    ps.attr('style', 'color: #fff !important')
.
.
.

Which does actually change the background, but in no way I can change the text colour. If I try filter: invert(100%) everything is nice, but the images are also looking inverted. Using #disqus_thread *:not(img) isn't working either.

If I open firefox's inspector tool, I see the properties has !important in them. So I can't change the style anymore. And switching back and forth isn't actually working even in basic CSS.

Is there any way to flip the colour without using filter?

disqus css
1 Answers

I was also having this problem and my workaround on this was first, the toggle button will remove all the elements inside the disqus_thread div using the code:

mydiv = document.getElementById('disqus_thread');
while (mydiv.firstChild) {
mydiv.removeChild(mydiv.firstChild);
}

Then, the button will reload the Disqus comment section using the function:

var disqus_shortname = "sample-shortname";
var disqus_url = "sample-url";
var disqus_identifier = "sample-identifier";
var disqus_loaded = false;
            

function disqus() {          
     if (!disqus_loaded)  {
          disqus_loaded = true;
          var e = document.createElement("script");
          e.type = "text/javascript";
          e.async = true;
          e.src = "//" + disqus_shortname + ".disqus.com/embed.js";
          (document.getElementsByTagName("head")[0] 
          ||document.getElementsByTagName("body")[0]).appendChild(e);
     }
}

Lastly, since Disqus comment section was on auto, it would check the inherited color and decide if it was gonna be light or dark mode which I read from https://help.disqus.com/en/articles/1717201-disqus-appearance-customizations.

How is the color scheme determined?

 - The light scheme is loaded when the text color Disqus inherits from your site has >= 50% gray contrast: between color: #000000; and color: #787878;
 - The dark scheme is loaded in all other instances.

Since, by toggling the button, the website would turn the color of the body to a darker color anyway, Disqus automatically inherits this and reloads to its dark mode with just the click of the toggle button.

I don't know if this will cause lags as I was experimenting on localhost and so far it wasn't lagging for me.

References:

https://css-tricks.com/snippets/javascript/remove-element/

https://help.disqus.com/en/articles/1717201-disqus-appearance-customizations.

https://www.labnol.org/internet/load-disqus-comments-on-click/28653/

user_155472720
Related