Support class-strategy dark mode theme

[mjy9088]

Many websites, including mine, use dark mode when the html element has the class dark.

I modified the theme CSS to support this dark mode strategy: giscus-theme.

I confirmed it works when I manually add/remove the dark class on the html element in the iframe.

It would be super useful if the Giscus component exposed an API for adding/removing the dark class on the html element.

useEffect(() => {
  const cancelWatch = themeModeManager.watchTheme((theme) => {
    iframeRef.contentWindow.postMessage(/* ... something goes here? */);
  });
  return cancelWatch;
}, [themeModeManager, iframeRef]);

[mjy9088]

I think I didn't try enough. sorry. I solved it :)

'use client';

import { useContext } from 'react';

import { ModeContext } from '@-ft/mode-next';
import Giscus from '@giscus/react';

export interface CommentProps {
  slug: string;
}

export function Comment({ slug }: CommentProps) {
  const { theme } = useContext(ModeContext);
  return (
    <Giscus
      // ...
      theme={theme}
      // ...
    />
  );
}