PaperModX/layouts/partials/remark42.html

<div class="comments">
  <div class="title">
    <span>Comments</span>
    <span class="counter"><span class="remark42__counter" data-url="{{ .page.Permalink }}"></span></span>
  </div>
  <div id="remark42">
  </div>
</div>

<script>
  var remark_config = {
    host: '{{ .ctx.url }}',
    site_id: '{{ .ctx.site }}',
    components: ['embed', 'counter'],
    max_shown_comments: 20,
    theme: 'light',
    // page_title: 'My custom title for a page',
    // show_email_subscription: false,
    simple_view: true
  };
  if (isDarkTheme()) {
    remark_config.theme = 'dark'
  }

  (function() {
    // toogle theme callback
    const key = 'remark42'
    if (!toggleThemeCallbacks.hasOwnProperty(key)) {
      toggleThemeCallbacks[key] = (isDark) => {
        const remark42 = window.REMARK42
        if (!remark42 || !document.querySelector('#remark42')) {
          return;
        }
        if (isDark) {
          remark42.changeTheme('light');
        } else {
          remark42.changeTheme('dark');
        }
      }
    }

    // init or reset remark42
    const remark42 = window.REMARK42
    if (remark42) {
      remark42.destroy()
      remark42.createInstance(remark_config)
    } else {
      for (const component of remark_config.components) {
        var d = document, s = d.createElement('script');
        s.src = `${remark_config.host}/web/${component}.mjs`;
        s.type = 'module';
        s.defer = true;
        // prevent the <script> from loading mutiple times by InstantClick
        s.setAttribute('data-no-instant', '')
        d.head.appendChild(s);
      }
    }
  })();
</script>