passing active theme name with next-themes doesn't change giscus theme upon refresh

[dannysteenman]

On the latest @giscus/react: 2.0.3 passing the active theme name from next-themes 0.1.1 doesn't change the giscus theme upon refresh. For example when dark mode is toggled the giscus theme becomes dark as expected, but when you refresh the browser or reload the giscus iframe then the giscus theme turns back to light on a dark themed page.

import Giscus, { Theme } from '@giscus/react';
import { useTheme } from 'next-themes';

type GiscusCommentProps = {
  category: string;
  categoryId: string;
};

export default function GiscusComment({ category, categoryId }: GiscusCommentProps) {
  const { theme } = useTheme();

  return (
    <Giscus
      repo='<repoName>'
      repoId='<repoId>'
      category={category}
      categoryId={categoryId}
      mapping='pathname'
      reactionsEnabled='0'
      emitMetadata='0'
      theme={theme as Theme}
    />
  );
}

In version 1.1.2 of @giscus/react it worked correctly, as an example:

import { Giscus, Theme } from '@giscus/react';
import { useTheme } from 'next-themes';

type GiscusCommentProps = {
  category: string;
  categoryId: string;
};

export default function GiscusComment({ category, categoryId }: GiscusCommentProps) {
  const { theme } = useTheme();

  return (
    <Giscus
      repo='<repoName>'
      repoId='<repoId>'
      category={category}
      categoryId={categoryId}
      mapping='pathname'
      reactionsEnabled='0'
      emitMetadata='0'
      theme={theme as Theme}
    />
  );
}

[laymonage]

Thanks for the report, I'll fix this soon. In the meantime, you can use the following workaround to fix this issue:

import Giscus, { Theme } from '@giscus/react';
import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';

type GiscusCommentProps = {
  category: string;
  categoryId: string;
};

export default function GiscusComment({ category, categoryId }: GiscusCommentProps) {
  const { theme } = useTheme();
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  if (!mounted) return null;

  return (
    <Giscus
      repo='<repoName>'
      repoId='<repoId>'
      category={category}
      categoryId={categoryId}
      mapping='pathname'
      reactionsEnabled='0'
      emitMetadata='0'
      theme={theme as Theme}
    />
  );
}

[dannysteenman]

I've confirmed that your workaround solved it, thanks @laymonage

[laymonage]

Fix released in 2.0.4. Thanks for the report!

[markshenouda]

This issue still exists in the latest version

[laymonage]

@markshenouda The issue is not with giscus, it's with how you use next-themes with it.

The theme property returned by useTheme() in your use case returns system, which is not a valid giscus theme. Please use the resolvedTheme value returned by useTheme() instead.

Example: https://github.com/laymonage/base/blob/main/src/components/Giscus.tsx

[markshenouda]

Thank you so much for explaining that, I just spend too much time debugging this bug