Fixing Disqus 'Auto' theme switching when using Next.js + next-themes
Tags: disqus, nextjs, react, webdev
Published: 2024-06-08 09:19:07

In <a href="https://www.oh-no.ooo/articles/a-blasting-august-with-blaugust" target="_blank">my last year's post about the amazing Blaugust event</a>, I've been mentioning my issue with setting up my <a href="https://nextjs.org" target="_blank">Next.js</a> site combined with <a href="https://www.npmjs.com/package/next-themes" target="_blank">next-themes</a> and <a href="https://disqus.com/" target="_blank">Disqus</a> commenting platform.

This article is here to make sure I can share my solution, as for as simple it was it might help some people that stumble upon it. Let's start first with what issue I had, what I've done, so that we can walk together through the solution!
<br />
## What was the issue
After following the <a href="https://dev.to/luisca/step-by-step-guide-to-adding-dark-mode-and-multiple-themes-to-your-nextjs-app-15lh" target="_blank">Step-By-Step Guide to Adding Dark Mode and Multiple Themes to Your Next.js App</a> written by <a href="https://dev.to/luisca" target="_blank">Luis Cadillo</a> (thank you pal!), I found myself with a neat Dark mode but my Disqus embed (installed through <a href="https://www.npmjs.com/package/disqus-react" target="_blank">disqus-react npm package</a>) would not update its theme properly, despite its theme settings being on `Auto`.

![Buggy Disqus theme change at the bottom of my articles](https://images.ctfassets.net/hzu7wkrk7tly/3UqieaGPLVgDYj3UwVSHnF/6a048c82fd500213b31979933da29d7a/buggy_disqus_theme.png?fm=avif&r=50)*Buggy Disqus theme change at the bottom of my articles*
<br />

I checked that the settings in `<sitename>.disqus.com/admin/settings/general/` were correct, but that didn't help.

![Disqus settings for automatic detection of the color scheme](https://images.ctfassets.net/hzu7wkrk7tly/6UJHYV3ekkdBDgjEnGE9yP/f02cdaa0483280661ac222555af511a1/Screenshot_2023-08-05_at_1.22.38.png?fm=avif&r=25&w=600)*Disqus settings for automatic detection of the color scheme.*
<br />

## The solution

My initial challenge was understanding how Disqus determined which theme to show in the page. Browsing the documentation I stumbled on a piece of useful information:

<blockquote>
<span class="font-bold">Light vs. dark color scheme</span><br />
A light or dark color scheme is automatically selected based on your site's stylesheets.
<br />
<br />
<span class="font-bold">How is the color scheme determined?</span><br />
<ul>
  <li><mark>The light scheme is loaded when <strong>the text color Disqus inherits from your site has >= 50% gray contrast</strong>: between color: #000000; and color: #787878;</mark></li>

  <li>The dark scheme is loaded in all other instances.</li>
</ul>
<div class="text-right">— <a href="https://help.disqus.com/en/articles/1717201-disqus-appearance-customizations" target="_blank">Disqus Appearance Customization</a></div>
</blockquote>
<br />
This allowed me to understand how the color scheme in Disqus was determined, but not yet why my changes wouldn't work. White text on a white background isn't quite the 'Auto' mode I was hoping for!

Searching for some help in <a href="https://stackoverflow.com/" target="_blank">StackOverflow</a>, I found my very same problem but no answer to it: <a href="https://stackoverflow.com/questions/75921829/disqus-theme-not-matching-background-when-changing-blog-theme-from-dark-to-light" target="_blank">Disqus theme not matching background when changing blog theme from dark to light</a>. Despite not finding a solution, I found some comfort in seeing that other peeps had my same problem and that it wasn't just me being... well... dumb xD

A little bit more digging and googling around brought me to another StackOverflow post, <a href="https://stackoverflow.com/questions/75787047/disqus-comments-dark-mode-renders-with-white-background?rq=2" target="_blank">Disqus comments Dark mode renders with white background</a> where <a href="https://stackoverflow.com/users/10312920/ken-mueller" target="_blank">Ken Mueller</a> mentions to "Remove the &lt;meta name="color-scheme" content="dark" /&gt; from your document.".

Now, I didn't have such a thing in my Next.js ecosystem, but I noticed that next-themes applied a `style="color-scheme: dark;"` to my main HTML tag.

```html
<html lang="en" class="dark" style="color-scheme: dark;">
```
<br />

![My Chrome inspector showing that the HTML tag in my website had this extra style="color-scheme: dark;" property.](https://images.ctfassets.net/hzu7wkrk7tly/7gl5NhSwwFZc4LgivqyAsN/7a8d2bb8d723d383321339d100e41862/Screenshot_2023-08-05_at_12.43.25.png?fm=avif&r=25&w=600)*My Chrome inspector showing that the HTML tag in my website had this extra <code>style="color-scheme: dark;"</code> property.*
<br />

Since messing around with the inspector costs nothing, I've simply tried to remove the content of `style` and don't you know... it worked!

Checking <a href="https://www.npmjs.com/package/next-themes" target="_blank">next-themes documentation</a>, reading the codebase and bashing my head a little, I seem to understand that this HTML style change comes from the `enableColorScheme` setting of next-themes, which by default is set as `true`, but for my case would need to be set `false`.

```typescript
const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <>
      <ThemeProvider 
        attribute="class" 
        enableColorScheme={false}
      >
        <Provider store={store}>
          <Component {...pageProps} />
        </Provider>
      </ThemeProvider>
    </>
  );
};

export default MyApp;
```
<br />

Wohoo! Works like a charm!

But no, wait!

Now if I am in an article page and I want to switch the theme there, my `<DiscussionEmbed>` component from  <a href="https://www.npmjs.com/package/disqus-react" target="_blank">disqus-react</a> won't update automatically! So what do we do now?

I happen to have this component wrapped in a container for easier setup on my page, and I know that React would re-render a component should its key change... so 1 + 1 I had my 2:

```typescript
const DisqusComments: FC<DisqusCommentsProps> = 
  ({ url, slug, title }) => {
  // Import the name of the theme with useTheme() hook
  // from next-themes
  const { theme } = useTheme(); 

  const disqusConfig = {
    url: url,
    identifier: slug,
    title: title,
  };

  // Use it as a key={theme} for the DiscussionEmbed component
  // so that it will re-render should the theme change
  return (
    <div className="my-14">
      <DiscussionEmbed 
        key={theme} 
        shortname={"oh-no"} 
        config={disqusConfig} 
       />
    </div>
  );
};

export default DisqusComments;
```
<br />

Basically, I'll use the name of the theme to determine whether the Disqus component should re-render, and should someone change the theme in an article page, __the Disqus comment section will reload with the correct theme__!

At last, all I wanted!

![My website Disqus section adapting to both dark and light color schemes. Yay!](https://images.ctfassets.net/hzu7wkrk7tly/37HN4qOVbiyzNuHZEKBPaa/490dbc65f7935bb6555b17fe6a4bcabd/Disqus_comment_section_light_dark_theme.png?fm=avif&r=25)*My website Disqus section adapting to both dark and light color schemes. Yay!*
<br />


Let me know if this helped you somehow, if you had the same issue or if somehow it brought you some help understanding a bit more about the problem for your own specific case!
<br />

## Sources and inspiration
- <a href="https://dev.to/luisca/step-by-step-guide-to-adding-dark-mode-and-multiple-themes-to-your-nextjs-app-15lh" target="_blank" rel="noreferrer noopener">Step-By-Step Guide to Adding Dark Mode and Multiple Themes to Your Next.js App</a> by <a href="https://dev.to/luisca" target="_blank" rel="noreferrer noopener">Luis Cadillo</a>
- <a href="https://www.npmjs.com/package/next-themes" target="_blank" rel="noreferrer noopener">next-themes npm package</a>
- <a href="https://www.npmjs.com/package/disqus-react" target="_blank" rel="noreferrer noopener">disqus-react npm package</a>
- <a href="https://stackoverflow.com/questions/75921829/disqus-theme-not-matching-background-when-changing-blog-theme-from-dark-to-light" target="_blank" rel="noreferrer noopener">Disqus theme not matching background when changing blog theme from dark to light</a> from <a href="https://stackoverflow.com/" target="_blank" rel="noreferrer noopener">StackOverflow</a>
- <a href="https://stackoverflow.com/questions/75787047/disqus-comments-dark-mode-renders-with-white-background?rq=2" target="_blank" rel="noreferrer noopener">Disqus comments Dark mode renders with white background</a> from <a href="https://stackoverflow.com/" target="_blank" rel="noreferrer noopener">StackOverflow</a>
- Cover: <a href="https://www.freepik.com/free-psd/3d-rendering-graphic-design_31283887.htm" target="_blank" rel="noreferrer noopener">3D rendering of graphic design</a> by <a href="https://www.freepik.com/author/freepik" target="_blank" rel="noreferrer noopener">Freepik</a>, <a href="https://www.freepik.com/free-vector/geometric-circle-background-desktop-wallpaper-with-multicolors-vector_18220903.htm" target="_blank" rel="noreferrer noopener">Vector geometric background</a> by <a href="https://www.freepik.com/author/rawpixel-com" target="_blank" rel="noreferrer noopener">rawpixel.com</a> via <a href="https://freepik.com" target="_blank" rel="noreferrer noopener">Freepik</a>, blurred code image created with <a href="https://carbon.now.sh" target="_blank" rel="noreferrer noopener">Carbon</a>, Next.js logo from <a href="https://nextjs.org" target="_blank" rel="noreferrer noopener">Next.js official website</a>, Disqus logo from <a href="https://disqus.com/brand/" target="_blank" rel="noreferrer noopener">Disqus Brand and Logos official material</a>
<hr />
Originally posted in <a href="https://www.oh-no.ooo/">oh-no.ooo</a> (<a href="https://www.oh-no.ooo/articles/fixing-disqus-auto-theme-switching-when-using-next-js-next-themes">Fixing Disqus 'Auto' theme switching when using Next.js + next-themes</a>), my personal website.