changeTheme does not work when REMARK42::ready event is fired

[alex4814]

Calling window.REMARK42.changeTheme while <div id="remark42"> is not fully initialized (i.e., not showing in the page footer, but REMARK42::ready event is fired) does not really affect the style.

What I want to do is to ensure the dark/light theme be same with blog theme.

Maybe something like REMARK::div-ready is needed? or any workarounds.

[akellbl4]

Hey, why would you need to call it when it's not loaded? Initial theme value can be sent in remark_config. Could you please describe your case?

[alex4814]

Target is the theme between remark42 and the site should match when clicking "toggle-theme" button.

Suppose the initial theme of the site is "light", then it is also set in remark_config.
However, the toggle-theme button may be clicked when the remark42 div is not loaded yet (i.e., click toggle theme button right after refreshing the current page before remark42 div at the bottom loaded). During this gap, remark42 does not know anything about theme change.

I need the commented line below to match themes, cuz what I found at the moment is only "REMARK42::ready" event.

<script>
  window.addEventListener("REMARK42::ready", () => {
    window.addEventListener('papermod::theme-toggle', e => {
      window.REMARK42.changeTheme(e.detail)
    });
    // window.REMARK42.changeTheme(current_theme)
  })
</script>

P.S. I'm not so familiar with javascript or DOM, so may be there's another way to achieve the same thing.

[akellbl4]

This should help.

<script>
  window.addEventListener("REMARK42::ready", () => {
    window.addEventListener('papermod::theme-toggle', e => {
      window.REMARK42.changeTheme(e.detail)
    });
    window.REMARK42.changeTheme(document.body.classList.add('dark') ? 'dark' : 'light')
  })
</script>

As I understand you're using https://github.com/adityatelange/hugo-PaperMod so code below should be compatible with it

[alex4814]

Yes, I did that before and it is exactly the problem this issue is for.

<script>
  window.addEventListener("REMARK42::ready", () => {
    window.addEventListener('papermod::theme-toggle', e => {
      console.log("theme-toggle", e.detail)
      window.REMARK42.changeTheme(e.detail)
    });
    console.log("local storage pref theme", localStorage.getItem('pref-theme'))
    window.REMARK42.changeTheme(localStorage.getItem('pref-theme'))
  })
</script>

The calling of changeTheme does not actually change the theme.
This screen video may help clarify the case.