Issue with Dynamically Changing Giscus Theme Based on Website Theme

Hello Giscus Team,

Firstly, I'd like to apologize as I'm not well-versed in coding. This issue and the attempted solutions were generated and formulated with the assistance of ChatGPT, based on my experiences and the problems I've encountered on my website: greendolphindance.com.

Problem Description:

• My website has a dark mode toggle, and I want giscus to automatically switch its theme to match the website's current theme.
• The giscus comments section is dynamically loaded when the user scrolls down to it.

Attempted Solutions:

1. Using MutationObserver: Tried to observe changes in the body class to detect theme changes and send a message to the giscus iframe to change its theme. The message is being sent successfully (verified using console.log), but the theme in the giscus iframe is not updating.

2. Using setTimeout/setInterval: Tried to delay the message sending or repeatedly send the message to ensure it is received after giscus has fully loaded. This method was not reliable and did not consistently apply the theme.

3. Directly Observing Giscus Iframe: Attempted to observe the giscus iframe for changes and send the theme update message upon detecting changes. This also did not result in the theme being updated.

Code Snippets:

Here are some snippets from the attempted solutions:

// Example code for changing giscus theme
function changeGiscusTheme() {
    const theme = document.body.classList.contains('dark-theme') ? 'dark' : 'light';
    const iframe = document.querySelector('iframe.giscus-frame');
    if (!iframe) return;
    iframe.contentWindow.postMessage({ giscus: { setConfig: { theme: theme === 'dark' ? 'noborder_dark' : 'noborder_light' } } }, 'https://giscus.app');
}

// Example code for observing body class changes
const observer = new MutationObserver(changeGiscusTheme);
observer.observe(document.body, { attributes: true });

I appreciate any assistance or guidance you can provide on this issue. Thank you in advance!