Themes [Javascript] Need some help.

[GameTheory]

So I developed a theme for a website on the Hugo framework. It has a light and dark mode. The theme is done, except for this one piece of the the puzzle...

There is a comments widget served up from a CDN which comes with a bunch of initial themes you can set (ie. light, dark, etc).

Here is the code for the widget that is inserted into your html page...

<script src="https://utteranc.es/client.js"
        repo="{{ site.Params.comments }}"
        issue-term="title"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

Now when I click a toggle the website theme switches from light to dark. What I need is to be able to change the "theme" element in the widget above to "github-dark" so that it matches the theme. I need to be able to go from light to dark and dark to light.

Is there any way to do this with some javascript or perhaps some golang?

 

[23tony]

It's been a while since I worked with javascript, but since that's an attribute of the tag, you should be able to change it.

Yeah - after writing that, I just tested something and it works.

First, give the tag one more attribute: "id", then you can use the following:

myScript = document.getElementById('myScriptId');
myScript.setAttribute('theme', 'github-dark');

 

[GameTheory]

It's been a while since I worked with javascript, but since that's an attribute of the tag, you should be able to change it.

Yeah - after writing that, I just tested something and it works.

First, give the tag one more attribute: "id", then you can use the following:

myScript = document.getElementById('myScriptId');
myScript.setAttribute('theme', 'github-dark');

I had tried this same code yesterday, but it didn't work. That's because I was inserting this code in the <header> which was before the widget code. So now I put the code in the <footer> after the widget code and now it works flawlessly. Silly mistake .

Thanks for taking the time, much appreciated!