Fixing Disqus Comment Section Theme Toggle

Disqus 'Auto' Theme Toggle Not Working As Intended?

Recently, I've added Disqus comments to the article posts, but this wasn't as simple as it usually can be because I have a theme toggle on the site, which is an added convenience for the user. Light and Dark modes are available.

NOTE: If you are using a transition for your background-color and/or color this could be a big reason why your Disqus comment section might not be updating properly.

Below is an example of what can cause this issue:

body {
  transition:
    background-color 0.5s,
    color 0.5s;
}

The reason that this can cause an issue is that when you change themes, Disqus will normally try to adapt instantly to that change and will check the background-color and color.

Probing Through the Depths of the Internet

When I was looking online to see if anyone had this same issue before and how they might have gone about solving it, I had an extremely hard time finding something that would work for my current situation and current build setup, e.g., NextJS, React, etc.

That was until I came across another blog that actually had the answers I was looking for! Hooray! 🥳

So I naturally wanted to share this find with anyone that comes to my personal blog and might have the same issues and/or might be interested in learning about something like this for future projects.

oh-no.ooo Blog Post

The article is by Lucia Nazzaro and posted on her personal blog site, oh-no.ooo, titled Fixing Disqus 'Auto' theme switching when using Next.js + next-themes

If you are having issues after reading her article, please refer back to the note section of this article displayed above.