Issue when switching between light and dark mode

[khalidabuhakmeh]

Hello,

First of all, this is a great plugin. Thank you for developing it. Currently, I'm running into an issue where, upon navigating from a page after changing from light to dark, the theme gets set to preferred. This typically leads to a mismatch between light and dark themes.

The seems to happen on pages that have yet to have a discussion created as well. The fix is pretty straightforward, but I wanted to check with you first.

It's to listen for giscus events and set the theme after a giscus event occurs. This ensures the theme is set correctly if for some reason the discussion is not found.

https://github.com/giscus/giscus/blob/main/ADVANCED-USAGE.md#giscus-to-parent-message-events

You can add this code to the end of the constructor of the GiscusComments class.

function handleMessage(event: MessageEvent) {
    if (event.origin !== 'https://giscus.app') return;
    if (!(typeof event.data === 'object' && event.data.giscus)) return;

    const giscusData = event.data.giscus;
    const frame = document.querySelector('iframe.giscus-frame')

    frame.contentWindow.postMessage(
        {
            giscus: {
                setConfig: {
                    theme: getThemeValue()
                }
            }
        },
        '*'
    )
}

window.addEventListener('message', handleMessage);

[dragomano]

Looks good, however giscusData is not used anywhere, did you point it as an example?

Your PR is welcome.

[khalidabuhakmeh]

You're right, the giscusData is not used, it provides information about the event sent, but in this case it's probably not necessary to use any of that information. I'll try and get a PR today. Thank you.

[khalidabuhakmeh]

I did a tiny bit of refactoring to handle the typescript type system and to quiet some of the warnings about possible nulls as well. Please let me know if you have any feedback. #6