Dynamic theme switching

[mrsauravsahu]

I'm currently using utterances to add comments to my site. Sample is - https://mrsauravsahu.github.io/posts/39/ I have a theme toggle button in my navbar which allows to switch between light and dark themes. However, utterances loads directly when the page loads, so it does not respect the change in the theme attribute.

Is there a way to dynamically switch themes?

[tmshkr]

You can dispatch a custom event on theme change, then handle it with a function that will remove the previous DOM node and then load the script again with the new theme.

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

[mrsauravsahu]

Thanks @tmshkr
Worked great.
Closing this.

[tmshkr]

Happy to help @mrsauravsahu

It would be ideal if the theme could be changed without having to reload the script. There seems to be a way to change the theme without reloading the script by using postMessage.

For example, if you execute the following code in your browser console, it should change the theme of the comments to dark:

document.querySelector("iframe.utterances-frame").contentWindow.postMessage({type: "set-theme", theme: "github-dark"});

But it only seems to work on utteranc.es or the utterances local dev environment. It doesn't seem to work on other sites.

[mrsauravsahu]

I can give it a try.

[tmshkr]

Ah, the targetOrigin needs to be specified. This works:

document
  .querySelector("iframe.utterances-frame")
  .contentWindow.postMessage(
    { type: "set-theme", theme: themeName },
    "https://utteranc.es/"
  )

[mrsauravsahu]

Oh that makes sense. There is a check on the origin

[mrsauravsahu]

Works great! Thanks @tmshkr
https://mrsauravsahu.github.io/blog/39/

[transitive-bullshit]

That worked for me -- thanks @tmshkr