So, you finally decided to integrate Disqus into your website to let your readers share their thoughts. Congratulations! But wait, why isn’t it adapting to your website’s theme? Welcome to the rabbit hole. I know what you’re feeling right now—there isn’t much support on this topic, but I assure you this will help.
The problem we're facing is that Disqus does not respond to theme changes when we click the theme button. I tried searching on Stack Overflow and Reddit, but I didn’t find anything useful. So, I sat down and pondered: why is it not responding to the theme?
If you notice, Disqus only changes the theme on reload, which means it needs to be re-rendered or remounted each time the theme changes. To achieve this, we have to make the component a client component.
This will allow us to freely use React hooks and re-render the component however we want. In my case, I created a context that controls the theme using useState. This context lets me add the theme state as a key on the component.
As you can see, after doing that, whenever I click the theme button, Disqus reloads and adapts to the new colors.
You have to make sure that you have set Disqus theme to auto in Disqus settings
Solutions that didn’t work
Since the Disqus component is an iframe, adding CSS to manipulate its style will not be effective. However, you can change one thing using CSS: the <a> elements in Disqus. Other than that, you cannot change much.
I was using a custom hook to return the styles used in the style attribute, but that didn’t work since it wasn’t a state variable. There are many other methods I tried that I can’t fully remember, and all of them were unsuccessful.
Conclusion
The only way I’ve been able to get it to work is as I described earlier. Maybe there are other methods I’m not aware of, but as far as I know, this is the most effective way to handle this issue. A user won’t change the theme a million times per second, so that’s not a concern.
One issue to note, related to Disqus itself: when you use Lighthouse to audit your site’s performance, it will show that there’s an application using a deprecated API. Guess who that is? Yep, it's Disqus. I’m not sure if we can fix this problem, but if anyone has a solution, please leave a comment below.
Thank you for reading this far!