<a href="https://www.freepik.com/free-psd/3d-rendering-graphic-design_31283887.htm" target="_blank" rel="noreferrer noopener">3D rendering of graphic design (Opens in a new tab)</a> by <a href="https://www.freepik.com/author/freepik" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</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 (Opens in a new tab)</a> by <a href="https://www.freepik.com/author/rawpixel-com" target="_blank" rel="noreferrer noopener">rawpixel.com (Opens in a new tab)</a> via <a href="https://freepik.com" target="_blank" rel="noreferrer noopener">Freepik (Opens in a new tab)</a>, blurred code image created with <a href="https://carbon.now.sh" target="_blank" rel="noreferrer noopener">Carbon (Opens in a new tab)</a>, Next.js logo from <a href="https://nextjs.org" target="_blank" rel="noreferrer noopener">Next.js official website (Opens in a new tab)</a>, Disqus logo from <a href="https://disqus.com/brand/" target="_blank" rel="noreferrer noopener">Disqus Brand and Logos official material (Opens in a new tab)</a>

Next.js theme switch and Disqus embed

In <a href="https://www.oh-no.ooo/articles/a-blasting-august-with-blaugust" target="_blank" rel="noreferrer noopener">my last post about the amazing Blaugust event (Opens in a new tab)</a>, I've been mentioning my issue with setting up my <a href="https://nextjs.org" target="_blank" rel="noreferrer noopener">Next.js (Opens in a new tab)</a> site combined with <a href="https://www.npmjs.com/package/next-themes" target="_blank" rel="noreferrer noopener">next-themes (Opens in a new tab)</a> and <a href="https://disqus.com/" target="_blank" rel="noreferrer noopener">Disqus (Opens in a new tab)</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!

## 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" rel="noreferrer noopener">Step-By-Step Guide to Adding Dark Mode and Multiple Themes to Your Next.js App (Opens in a new tab)</a> written by <a href="https://dev.to/luisca" target="_blank" rel="noreferrer noopener">Luis Cadillo (Opens in a new tab)</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" rel="noreferrer noopener">disqus-react npm package (Opens in a new tab)</a>) would not update its theme properly, despite its theme settings being on `Auto`.

<figure>
 <img src="//images.ctfassets.net/hzu7wkrk7tly/3UqieaGPLVgDYj3UwVSHnF/6a048c82fd500213b31979933da29d7a/buggy_disqus_theme.png?fm=avif&r=50" class="big-picture" />
 <figcaption>
 Buggy Disqus theme change at the bottom of my articles
 </figcaption>
 </figure>

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

<figure>
 <img src="https://images.ctfassets.net/hzu7wkrk7tly/6UJHYV3ekkdBDgjEnGE9yP/f02cdaa0483280661ac222555af511a1/Screenshot_2023-08-05_at_1.22.38.png?fm=avif&r=25&w=600" class="big-picture" />
 <figcaption>
 Disqus settings for automatic detection of the color scheme.
 </figcaption>
 </figure>

## 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>
Light vs. dark color scheme 
A light or dark color scheme is automatically selected based on your site's stylesheets.
 
 
How is the color scheme determined? 
<ul>
 <li>The light scheme is loaded when the text color Disqus inherits from your site has >= 50% gray contrast: between color: #000000; and color: #787878;</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" rel="noreferrer noopener">Disqus Appearance Customization (Opens in a new tab)</a></div>
</blockquote>

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" rel="noreferrer noopener">StackOverflow (Opens in a new tab)</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" rel="noreferrer noopener">Disqus theme not matching background when changing blog theme from dark to light (Opens in a new tab)</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" rel="noreferrer noopener">Disqus comments Dark mode renders with white background (Opens in a new tab)</a> where <a href="https://stackoverflow.com/users/10312920/ken-mueller" target="_blank" rel="noreferrer noopener">Ken Mueller (Opens in a new tab)</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;">
```

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

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" rel="noreferrer noopener">next-themes documentation (Opens in a new tab)</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;
```

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" rel="noreferrer noopener">disqus-react (Opens in a new tab)</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;
```

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!

<figure>
 <img src="//images.ctfassets.net/hzu7wkrk7tly/37HN4qOVbiyzNuHZEKBPaa/490dbc65f7935bb6555b17fe6a4bcabd/Disqus_comment_section_light_dark_theme.png?fm=avif&r=25" class="big-picture" />
 <figcaption>
 My website Disqus section adapting to both dark and light color schemes. Yay!
 </figcaption>
</figure>

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!

So, you want to have both a light and dark theme in your Next.js website, but your Disqus embed doesn't seem to change its theme accordingly... Maybe this will help!

oh-no.ooo

Disqus

Articles

Fixing Disqus 'Auto' theme switching when using Next.js + next-themes