Merge pull request #67 from dillonzq/feature/detect_system_dark_mode

feat(theme): add detecting system dark mode to set site theme
This commit is contained in:
Dillon 2020-02-11 21:42:25 +08:00 committed by GitHub
commit a07f0c65f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 25 additions and 20 deletions

View file

@ -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")

View file

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

View file

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

View file

@ -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 -}}