refactor: simplify utterances.html

Currently, `changeMode()` function in dark-mode.js can handle it well.

2 files changed, 9 insertions, 33 deletions

diff --git a/assets/js/dark-mode.js b/assets/js/dark-mode.js
index be82658..e943545 100644
--- a/assets/js/dark-mode.js
+++ b/assets/js/dark-mode.js
@@ -73,9 +73,9 @@ function changeMode() {
         // Change Utterances Comments Theme
         // https://github.com/utterance/utterances/issues/229
         if (isDark) {
-            changeUtterancesTheme('{{ .Site.Params.utterancesThemeDark }}');
+            changeUtterancesTheme('{{ .Site.Params.utterancesThemeDark | default "photon-dark" }}');
         } else {
-            changeUtterancesTheme('{{ .Site.Params.utterancesTheme }}');
+            changeUtterancesTheme('{{ .Site.Params.utterancesTheme | default "github-light" }}');
         }
         function changeUtterancesTheme(theme) {
             const iframe = document.querySelector('.utterances-frame');
diff --git a/layouts/partials/third-party/utterances.html b/layouts/partials/third-party/utterances.html
index 4bcd9ae..94a12d8 100644
--- a/layouts/partials/third-party/utterances.html
+++ b/layouts/partials/third-party/utterances.html
@@ -1,15 +1,3 @@
-{{- if .Site.Params.enableDarkMode -}}
-    {{- with .Site.Params.defaultTheme | default "light" -}}
-        {{- if eq . "light" -}}
-            {{- $.Scratch.Set "theme" $.Site.Params.utterancesTheme -}}
-        {{- else -}}
-            {{- $.Scratch.Set "theme" $.Site.Params.utterancesThemeDark -}}
-        {{- end -}}
-    {{- end -}}
-{{- else -}}
-    {{- $.Scratch.Set "theme" $.Site.Params.utterancesTheme -}}
-{{- end -}}
-{{- $theme := $.Scratch.Get "theme" -}}
 <script>
     function loadComments() {
         (function() {
@@ -20,7 +8,7 @@
             script.crossOrigin = 'anonymous';
             script.setAttribute('repo', '{{ .Site.Params.utterancesRepo }}');
             script.setAttribute('issue-term', '{{ .Site.Params.utterancesIssueTerm }}');
-            {{ template "theme" (dict "$" . "theme" $theme) }}
+            script.setAttribute('theme', '{{ template "utterances-theme" . }}');
             {{ with .Site.Params.utterancesLabel }}
                 script.setAttribute('label', '{{ . }}');
             {{ end }}
@@ -28,23 +16,11 @@
         })();
     }
 </script>
-{{- define "theme" -}}
-    {{- $ := index . "$" -}}
-    {{- $theme := .theme -}}
-    {{- if $.Site.Params.enableDarkMode -}}
-        const userPrefers = localStorage.getItem('theme');
-        const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        const lightModeMediaQuery = window.matchMedia('(prefers-color-scheme: light)');
-        if (userPrefers === "dark") {
-            script.setAttribute('theme', '{{ $.Site.Params.utterancesThemeDark }}');
-        } else if (userPrefers === "light") {
-            script.setAttribute('theme', '{{ $.Site.Params.utterancesTheme }}');
-        } else if (darkModeMediaQuery.matches) {
-            script.setAttribute('theme', '{{ $.Site.Params.utterancesThemeDark }}');
-        } else if (lightModeMediaQuery.matches) {
-            script.setAttribute('theme', '{{ $.Site.Params.utterancesTheme }}');
-        }
-    {{- else -}}
-        script.setAttribute('theme', '{{ $theme }}');
+
+{{- define "utterances-theme" -}}
+    {{- $theme := .Site.Params.utterancesTheme | default "github-light" -}}
+    {{- if and .Site.Params.enableDarkMode (eq .Site.Params.defaultTheme "dark") -}}
+        {{- $theme = .Site.Params.utterancesThemeDark | default "photon-dark" -}}
     {{- end -}}
+    {{- $theme -}}
 {{- end -}}