Merge pull request #67 from dillonzq/feature/detect_system_dark_mode

feat(theme): add detecting system dark mode to set site theme

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")
+  # site default theme ("light", "dark", "auto")
-  defaultTheme = "light"
+  defaultTheme = "auto"
 
   # Home Page Info
   ##home mode ("post", "other")

exampleSite/zh/config.toml

@@ -110,8 +110,8 @@ dateFormatToUse = "2006-01-02"
   description = "关于 LoveIt 主题"
   # 网站关键词
   keywords = ["Theme", "Hugo"]
-  # 网站默认主题 ("light", "dark")
+  # 网站默认主题 ("light", "dark", "auto")
-  defaultTheme = "light"
+  defaultTheme = "auto"
 
   # 主页信息设置
   ## 主页模式 ("post", "other")

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';
             }

layouts/partials/comments.html

@@ -23,16 +23,16 @@
         {{- end -}}
         <script>
             var gitalk = new Gitalk({
-                id: "{{ .Date }}",
+                id: '{{ .Date }}',
-                title: "{{ .Title }}",
+                title: '{{ .Title }}',
-                clientID: "{{ .Site.Params.gitalk.clientId }}",
+                clientID: '{{ .Site.Params.gitalk.clientId }}',
-                clientSecret: "{{ .Site.Params.gitalk.clientSecret }}",
+                clientSecret: '{{ .Site.Params.gitalk.clientSecret }}',
-                repo: "{{ .Site.Params.gitalk.repo }}",
+                repo: '{{ .Site.Params.gitalk.repo }}',
-                owner: "{{ .Site.Params.gitalk.owner }}",
+                owner: '{{ .Site.Params.gitalk.owner }}',
-                admin: ["{{ .Site.Params.gitalk.owner }}"],
+                admin: ['{{ .Site.Params.gitalk.owner }}'],
-                body: decodeURI(location.href)
+                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",
+                el: '#valine_container',
-                appId: "{{ .Site.Params.valine.appId }}",
+                appId: '{{ .Site.Params.valine.appId }}',
-                appKey: "{{ .Site.Params.valine.appKey }}",
+                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 -}}