Fixing problem with incorrect style of utterances comment section (#840)

Piotr Kozerski

24.01.2023 e35f1da207cb25f4fce730177423d041cf90e7dd

Fixing problem with incorrect style of utterances comment section (#840)

### Prerequisites

Put an `x` into the box(es) that apply:

- [x] This pull request fixes a bug.
- [ ] This pull request adds a feature.
- [ ] This pull request introduces breaking change.

### Description

This PR fixes a bug that causes inconsistencies between the themes used
by the website and the utterances comments section.

If the website theme is set automatically and the user is in dark mode,
utterances will use light mode.

This is because the `colorscheme` parameter in localStorage is not set
until the button to switch themes is used, and if this parameter is not
set, utterances displays the light theme by default.

Steps to reproduce:
1. Use dark mode on your system
2. Load a website with "utterances" comment section enabled
3. See that although your website is in dark mode, utterances uses light
mode

### Issues Resolved

None

 layouts/partials/posts/utterances.html

@@ -1,12 +1,21 @@
{{- if isset .Site.Params "utterances" -}}
  {{- if and (isset .Site.Params.utterances "repo") (not (eq .Site.Params.utterances.repo "" )) (eq (.Params.disableComments | default false) false) -}}
  <div class="comments">
    <script>
  
{{- if and (isset .Site.Params.utterances "repo") (not (eq .Site.Params.utterances.repo "" )) (eq
(.Params.disableComments | default false) false) -}}
<div class="comments">
  <script>

    let getTheme = window.localStorage && window.localStorage.getItem("colorscheme");
  
    getTheme = getTheme == null ? '{{$.Site.Params.utterances.theme}}' : getTheme;
    
    let themeInParams = '{{$.Site.Params.utterances.theme}}';

    if (getTheme == null) {
      if (themeInParams !== '' && themeInParams !== 'auto') {
        getTheme = themeInParams;
      }
      else {
        getTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
      }
    }

    let theme = getTheme === 'dark' ? 'github-dark' : 'github-light';
    let s = document.createElement('script');
    s.src = 'https://utteranc.es/client.js';
@@ -17,8 +26,8 @@
    s.setAttribute('async', '');
    document.querySelector('div.comments').innerHTML = '';
    document.querySelector('div.comments').appendChild(s);
  
    </script>
    </div>
  {{- end -}}

  </script>
</div>
{{- end -}}
{{- end -}}