Sync Papermod with Remark42

[itdoginfo]

I am using Papermod with the Remark42 comment system.
Both themes are used and a switch between them. By default, both Papermod and Remark use a light theme.

Remark has a function call to change the theme

        window.REMARK42.changeTheme('dark');

Which changes the comment box from light to dark and vice versa.

I am having the following issues:

1. When changing the theme color, the color of the remark remains the same. I fixed it like this:
   layots/partials/footer.html

{{- if (not .Site.Params.disableThemeToggle) }}
<script>
    document.getElementById("theme-toggle").addEventListener("click", () => {
        if (document.body.className.includes("dark")) {
            document.body.classList.remove('dark');
            localStorage.setItem("pref-theme", 'light');
            window.REMARK42.changeTheme('light');
        } else {
            document.body.classList.add('dark');
            localStorage.setItem("pref-theme", 'dark');
            window.REMARK42.changeTheme('dark');
        }
    })

</script>
{{- end }}

Of course, this only works for the moment the theme is switched.

2. If after that, I go to another page, remark42 will have the default theme color.
   I tried to fix it in the following way:
   layots/partials/header.html

{{- /* theme is auto */}}
<script>
    if (localStorage.getItem("pref-theme") === "dark") {
        document.body.classList.add('dark');
        window.REMARK42.changeTheme('dark');
    } else if (localStorage.getItem("pref-theme") === "light") {
        document.body.classList.remove('dark')
        window.REMARK42.changeTheme('light');
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.classList.add('dark');
        window.REMARK42.changeTheme('light');
    }

</script>
{{- end }}

It doesn't work for me. How can I fix this correctly? Let me know if you need any other information.

[pixelfabs]

Not a developer here, but I can think out loud. It may help you:

Papermod uses localStorage to remember which theme the user has chosen. If you look carefully, you see it in the code. The code is localStorage.setItem So, Papermod has 1. A switch (function) and 2. Stores its value in localStorage (variable: dark or light).

Remark42 must have a similar function and variable, except you only implemented the variable (light/dark). The function, that suppose to store the state of theme in localStorage, is missing.

Like I mention earlier, I'm not a developer, so I cannot go into Remark42 source files and find what it is you need. You need to find the code that stores the state of Remark42 theme in wherever does it and put that in layots/partials/footer.html.

[rikdewit]

I got it to work by doing this:

Footer:

    document.getElementById("theme-toggle").addEventListener("click", () => {
        if (document.body.className.includes("dark")) {
            localStorage.setItem("pref-theme", 'light');
            window.REMARK42.changeTheme('light');
        } else {
            localStorage.setItem("pref-theme", 'dark');
            window.REMARK42.changeTheme('dark');
        }
    })

In your remark config

    var remark_config = {
      host: <host>,
      site_id: <site_id>,
      theme: document.body.className.includes("dark")? "dark": "light",
    }