<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/artalk@2.6.0/dist/Artalk.css" rel="stylesheet">

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/artalk@2.6.0/dist/Artalk.js"></script>

<!-- Artalk -->
<div id="Comments"></div>

<script>
  const artalkInstance = new Artalk({
    el:        '#Comments',
    pageKey:   '{{ .Page.RelPermalink }}',
    pageTitle: '{{ .Title }}',
    server:    '{{ $.Site.Params.comments.artalk.server }}',
    site:      '{{ $.Site.Params.comments.artalk.site }}',
    darkMode:  '{{ $.Site.Params.comments.artalk.darkMode }}'
  })

  window.addEventListener('onColorSchemeChange', (e) => {
    artalkInstance.setDarkMode(e.detail == 'dark')
  })
</script>
