Dark Mode (Tailwind) not working

[Subham-Maity]

I am using tailwind dark: class and "next-themes": "^0.2.1" to enable dark mode for my components. However, it does not work for Disqus Component. I have tried applying the dark class inside and outside the component, but it still does not change the color scheme. It works fine in light mode though. How can I fix this issue?

Here is my code for the component:

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

const Disqus = ({ className }: { className?: string }) => {
  const { asPath } = useRouter();
  const origin =
    typeof window !== "undefined" && window.location.origin
      ? window.location.origin
      : "";

  const url = `${origin}${asPath}`;
  console.log(url, "url");
  const { theme } = useTheme();

  return (
    <div className={className} key={theme}>
      <DiscussionEmbed
        shortname="https-abcdefg-vercel-app"
        config={
          {
            url,
            identifier: url,
            title: "abcdefg",
            language: "en_US",
            sso: {
              name: "SampleNews",
            },
            colorScheme: theme === "dark" ? "dark" : "light",
          } as any
        }
      />
    </div>
  );
};

export default Disqus;

//Parent 
<div className="w-[640px] ml-4 md:ml-64 lg:ml-96">
<DisqusComments className="bg-white dark:bg-[#242525] p-5" />
</div>

Dark Mode

Light Mode

[TharinduX]

@Subham-Maity same issue here. Did you fixed it?

[Subham-Maity]

@TharinduX Yes !

The only solution to this issue is to set up custom CSS. I’m using Next.js, so by default, I get globals.css. By adding the line #disqus_thread { color-scheme: none; } to this file, you are instructing the browser to not apply any specific color scheme (like light or dark mode) to the element with the id disqus_thread. This means that the element will not be affected by the user's preferred color scheme settings in their operating system or browser.

When you switch off the light mode using this method, the #disqus_thread element will appear in dark mode if your website is currently using a dark theme. This is because the element is now following the overall theme of your website, which is controlled by next-themes.

when you set up a switcher component (or any other type of theme switcher), it changes the current theme being used by your website. Since the #disqus_thread element is now following the overall theme of your website, it will also change appearance when you switch themes using your switcher component.

Dark

Light

[TharinduX]

@Subham-Maity Thanks! It fixed my dark mode issue. Im also using Next.js

But still some issues in Light mode.

[TharinduX]

Finally fixed it. Thanks @Subham-Maity I just needed to add the key={theme} in the the <DiscussionEmbed/> component. So everytime i switched the theme disqus comments component is reloading again. This actually fixed my issue. Thanks again

[AWolf81]

I have a workaround but it is not perfect. Yes, key={theme} is also used and needed.

My issue is the transition of the background and Disqus if set to auto theme is picking the wrong background color.
Another option would be to disable the transition but I'd like to keep it. Also mentioned in issue 18

I first thought to delay the component render until the theme is ready but couldn't get it to work - server side rendering complaint about it.

In my layout component I have the following transition class:

// RootLayout
return (
 <div className={clsx('bg-main-light text-main dark:bg-main dark:text-main-light transition-colors duration-500 ', inter.className)}>
  { children } /* <------ Disqus comments will be rendered here */
</div>)

So I have added a wrapper which is immediately set to the right background color. Then Disqus theme is working.

Here is my Code:

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

interface CommentsProps {
    title: string;
}

const Comments = ({ title }: CommentsProps) => {
    const { theme }  = useTheme();
    const url = typeof window !== 'undefined' && window.location.href
        ? window.location.href
        : '';

    const slug = url.split("/").slice(-1)[0]; // attention slug must be the last part
    
    return (<div className="bg-main-light dark:bg-main pt-4">
            {/* Setting bg here fixes transition issue at theme toggle - not perfect causes short flicker on comments section 
                but colors in Disqus are correct */}
            <DiscussionEmbed
                key={theme}
                shortname='ydecide-blog'        
                config={
                    {
                        url,
                        identifier: slug as string,
                        title: title
                    }
                }
            />
    </div>)
}

export default Comments

Here is the example screen recording, showing the short flicker during transition.