From 88273f439aaa763592087ba5cce494525b665721 Mon Sep 17 00:00:00 2001
From: Dillon <dillonzq@outlook.com>
Date: Tue, 11 Feb 2020 21:40:58 +0800
Subject: [PATCH] feat(theme): add detecting system dark mode to set site theme

add "auto" config in default theme, which detecting system dark mode to set site theme
---
 exampleSite/config.toml        |  4 ++--
 exampleSite/zh/config.toml     |  4 ++--
 layouts/_default/baseof.html   |  7 ++++++-
 layouts/partials/comments.html | 30 +++++++++++++++---------------
 4 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 9e8cd1e..5ade135 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -110,8 +110,8 @@ dateFormatToUse = "2006-01-02"
   description = "About LoveIt Theme"
   # site keywords
   keywords = ["Theme", "Hugo"]
-  # site default theme ("light", "dark")
-  defaultTheme = "light"
+  # site default theme ("light", "dark", "auto")
+  defaultTheme = "auto"
 
   # Home Page Info
   ##home mode ("post", "other")
diff --git a/exampleSite/zh/config.toml b/exampleSite/zh/config.toml
index 48c5e47..ca16c46 100644
--- a/exampleSite/zh/config.toml
+++ b/exampleSite/zh/config.toml
@@ -110,8 +110,8 @@ dateFormatToUse = "2006-01-02"
   description = "关于 LoveIt 主题"
   # 网站关键词
   keywords = ["Theme", "Hugo"]
-  # 网站默认主题 ("light", "dark")
-  defaultTheme = "light"
+  # 网站默认主题 ("light", "dark", "auto")
+  defaultTheme = "auto"
 
   # 主页信息设置
   ## 主页模式 ("post", "other")
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index d8b40c6..9cd2b89 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -17,7 +17,12 @@
         {{- /* Check theme isDark before body rendering */ -}}
         <script>
             if (!window.localStorage || !window.localStorage.getItem('theme')) {
-                window.isDark = '{{ .Site.Params.defaultTheme }}' === 'dark';
+                {{- $theme := .Site.Params.defaultTheme -}}
+                {{- if eq $theme "auto" -}}
+                    window.isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                {{- else -}}
+                    window.isDark = '{{ $theme }}' === 'dark';
+                {{- end -}}
             } else {
                 window.isDark = (window.localStorage && window.localStorage.getItem('theme')) === 'dark';
             }
diff --git a/layouts/partials/comments.html b/layouts/partials/comments.html
index ed0a59b..1645d41 100644
--- a/layouts/partials/comments.html
+++ b/layouts/partials/comments.html
@@ -23,16 +23,16 @@
         {{- end -}}
         <script>
             var gitalk = new Gitalk({
-                id: "{{ .Date }}",
-                title: "{{ .Title }}",
-                clientID: "{{ .Site.Params.gitalk.clientId }}",
-                clientSecret: "{{ .Site.Params.gitalk.clientSecret }}",
-                repo: "{{ .Site.Params.gitalk.repo }}",
-                owner: "{{ .Site.Params.gitalk.owner }}",
-                admin: ["{{ .Site.Params.gitalk.owner }}"],
-                body: decodeURI(location.href)
+                id: '{{ .Date }}',
+                title: '{{ .Title }}',
+                clientID: '{{ .Site.Params.gitalk.clientId }}',
+                clientSecret: '{{ .Site.Params.gitalk.clientSecret }}',
+                repo: '{{ .Site.Params.gitalk.repo }}',
+                owner: '{{ .Site.Params.gitalk.owner }}',
+                admin: ['{{ .Site.Params.gitalk.owner }}'],
+                body: decodeURI(location.href),
             });
-            gitalk.render("gitalk_container");
+            gitalk.render('gitalk_container');
         </script>
         <noscript>Please enable JavaScript to view the <a href="https://github.com/gitalk/gitalk">comments powered by Gitalk.</a></noscript>
     {{- end -}}
@@ -48,11 +48,11 @@
         {{- end -}}
         <script>
             new Valine({
-                el: "#valine_container",
-                appId: "{{ .Site.Params.valine.appId }}",
-                appKey: "{{ .Site.Params.valine.appKey }}",
+                el: '#valine_container',
+                appId: '{{ .Site.Params.valine.appId }}',
+                appKey: '{{ .Site.Params.valine.appKey }}',
                 {{- with .Site.Params.valine.placeholder -}}
-                    placeholder: "{{ . }}",
+                    placeholder: '{{ . }}',
                 {{- end -}}
                 {{- if .Site.Params.valine.notify -}}
                     notify: true,
@@ -61,7 +61,7 @@
                     verify: true,
                 {{- end -}}
                 {{- with .Site.Params.valine.avatar -}}
-                    avatar: "{{ . }}",
+                    avatar: '{{ . }}',
                 {{- end -}}
                 {{- with .Site.Params.valine.meta -}}
                     meta: {{ . | safeJS }},
@@ -69,7 +69,7 @@
                 {{- with .Site.Params.valine.pageSize -}}
                     pageSize: {{ . | safeJS }},
                 {{- end -}}
-                lang: {{ T "valineLang" }},
+                lang: '{{ T "valineLang" }}',
                 {{- if .Site.Params.valine.visitor -}}
                     visitor: true,
                 {{- end -}}