1. Download our Official Android App: Forums for Android!

Themes [Javascript] Need some help.

Discussion in 'Android Development' started by GameTheory, Jul 11, 2019.

  1. GameTheory

    GameTheory Android Expert
    Thread Starter
    Rank:
     #44
    Points:
    493
    Posts:
    3,909
    Joined:
    Jul 23, 2012

    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...

    Code (HTML5):
    1. <script src="https://utteranc.es/client.js"
    2.        repo="{{ site.Params.comments }}"
    3.        issue-term="title"
    4.        theme="github-light"
    5.        crossorigin="anonymous"
    6.        async>
    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?
     

    Advertisement

  2. 23tony

    23tony Well-Known Member
    Rank:
     #153
    Points:
    73
    Posts:
    100
    Joined:
    Mar 26, 2019

    Mar 26, 2019
    100
    36
    73
    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:
    Code (Text):
    1.  
    2. myScript = document.getElementById('myScriptId');
    3. myScript.setAttribute('theme', 'github-dark');
    4.  
     
    GameTheory likes this.
  3. GameTheory

    GameTheory Android Expert
    Thread Starter
    Rank:
     #44
    Points:
    493
    Posts:
    3,909
    Joined:
    Jul 23, 2012

    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 :rolleyes:.

    Thanks for taking the time, much appreciated! :)
     
    23tony likes this.

Share This Page

Loading...