Dالمدونة
انزل تحت
Back to all articles
Next.jsDark ModeTroubleshooting

Fixing Disqus Theme Switching in Next.js

Stop Disqus comment threads from ignoring your Next.js dark mode toggle by adjusting next-themes and re-rendering the embed.

Fixing Disqus Theme Switching in Next.js

Keeping the Disqus comments widget in sync with your Next.js theme switcher can be surprisingly tricky. I retraced the issue and the fix so you can apply it without digging through inspector panels or StackOverflow threads.

Where "Auto" Breaks Down

Disqus offers an Auto theme that should inherit your site's color palette, yet sites powered by next-themes often end up with mismatched backgrounds and illegible text. Two culprits combine here:

  1. next-themes injects style="color-scheme: dark;" on the <html> tag by default.
  2. Disqus only flips to its light theme when the computed text color has at least 50% contrast from pure black.

When the forced color-scheme stays stuck on dark, Disqus never inspects your updated CSS variables and remains in dark mode-even after your UI flips to light.

How Disqus Chooses Its Theme

  • If the inherited text color lands between #000000 and #787878, Disqus assumes a light theme.
  • Any other contrast pushes the widget into dark mode.
  • A hard-coded color-scheme: dark short-circuits that detection step entirely.

Step 1: Disable next-themes Color Scheme Injection

The ThemeProvider shipped by next-themes exposes an enableColorScheme flag. Set it to false so your HTML element no longer forces a color scheme that overrides Disqus' detector.

import "@/styles/globals.css";
import { ThemeProvider } from "next-themes";
import type { AppProps } from "next/app";

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider attribute="class" enableColorScheme={false}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

Once the inline style is gone, Disqus can read the actual text color your theme exposes. You'll instantly see the correct palette when reloading an article.

Step 2: Re-render Disqus When The Theme Changes

Disabling the inline style fixes reloads, but the embed still ignores live theme toggles because it never re-renders. Force a refresh by using the active theme as a React key, which tells React to remount the Disqus widget each time the theme changes.

"use client";

import { DiscussionEmbed } from "disqus-react";
import { useTheme } from "next-themes";

interface DisqusCommentsProps {
  url: string;
  slug: string;
  title: string;
}

export function DisqusComments({ url, slug, title }: DisqusCommentsProps) {
  const { theme } = useTheme();

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

  return (
    <DiscussionEmbed
      key={theme}
      shortname="your-disqus-shortname"
      config={disqusConfig}
    />
  );
}

Because the key changes from light to dark (or vice versa), DiscussionEmbed unmounts and remounts, re-reading the computed styles and respecting the new color scheme.

Extra Checks Before You Ship

  • Confirm that Disqus' admin panel is set to Auto under Settings -> General -> Color Scheme.
  • Make sure your theme toggle updates the body or root text color, not just background shades.
  • If you defer loading comments, propagate the current URL and slug so Disqus can cache the right thread across themes.

Wrapping Up

A single enableColorScheme={false} flag paired with a keyed re-render is all it takes to keep Disqus in sync with next-themes. Credit goes to Lucia Nazzaro for documenting the fix-use it as a quick checklist whenever you wire third-party widgets into a themed Next.js site.

0.5 تواصل معي

↪