How to customize giscus theme to match my website's dark mode?

[minx-nie]

I'm using giscus on my blog and want it to automatically switch between light/dark themes when my website changes mode.

Is there a way to do this with JavaScript?

[Yamrc]

I don't know the details of how your project handles theme switching, so I can only briefly explain how to update the theme on the giscus side.
After giscus has loaded, you can send a setConfig message to its iframe with postMessage. You don't need to reload the whole comments widget.

function setGiscusTheme(theme) {
  const iframe = document.querySelector("iframe.giscus-frame");
  if (!iframe) return;

  iframe.contentWindow.postMessage(
    {
      giscus: {
        setConfig: {
          theme,
        },
      },
    },
    "https://giscus.app",
  );
}

Then call it whenever your site switches between light and dark mode:
setGiscusTheme(isDark ? "dark" : "light");
If you use a custom giscus host, remember to replace the second argument of postMessage with your own origin.

Related docs:

• MDN postMessage: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
• giscus Advanced Usage: https://github.com/giscus/giscus/blob/main/ADVANCED-USAGE.md

English is not my native language, so I can't guarantee that the wording above fully matches what I meant. Sorry if anything is unclear :<

[abdul0325]

Yes. Giscus supports changing themes dynamically using postMessage.

function setGiscusTheme(theme) {
  const iframe = document.querySelector('iframe.giscus-frame');
  if (!iframe) return;

  iframe.contentWindow.postMessage(
    {
      giscus: {
        setConfig: {
          theme: theme === 'dark' ? 'dark' : 'light'
        }
      }
    },
    'https://giscus.app'
  );
}

Call setGiscusTheme('dark') or setGiscusTheme('light') whenever your site's theme changes.

[EARL146]

You can also listen for your website theme changes using MutationObserver and update giscus automatically.

Example:

const observer = new MutationObserver(() => {
const isDark = document.documentElement.classList.contains("dark");
setGiscusTheme(isDark ? "dark" : "light");
});

observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"]
});

This will automatically sync giscus whenever your website theme changes.