LoveIt/layouts/_default/baseof.html
Dillon 88273f439a 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
2020-02-11 21:40:58 +08:00

51 lines
2.2 KiB
HTML

{{- /* LoveIt theme version detection */ -}}
{{- if ne .Site.Params.version "0.1.X" -}}
{{- errorf "\n\nThere are two possible situations that led to this error:\n 1. You haven't copied the config.toml yet. See https://github.com/dillonzq/LoveIt#installation \n 2. You have an incompatible update. See https://github.com//dillonzq/LoveIt/blob/master/CHANGELOG.md \n\n有两种可能的情况会导致这个错误发生:\n 1. 你还没有复制 config.toml 参考 https://github.com/dillonzq/LoveIt#installation \n 2. 你进行了一次不兼容的更新 参考 https://github.com//dillonzq/LoveIt/blob/master/CHANGELOG.md \n" -}}
{{- end -}}
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>
{{- block "title" . }}{{ .Site.Title }}{{ end -}}
</title>
{{- partial "head.html" . -}}
</head>
<body>
{{- /* Check theme isDark before body rendering */ -}}
<script>
if (!window.localStorage || !window.localStorage.getItem('theme')) {
{{- $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';
}
window.isDark && document.body.classList.add('dark-theme');
</script>
{{- /* Body wrapper */ -}}
<div class="wrapper">
{{- partial "header.html" . -}}
<main class="main">
<div class="container">
{{- block "content" . }}{{ end -}}
</div>
</main>
{{- partial "footer.html" . -}}
</div>
{{- /* Dynamic to top button */ -}}
<a href="#" class="dynamic-to-top" id="dynamic-to-top" data-scroll>
<span>&nbsp;</span>
</a>
{{- /* Load scripts */ -}}
{{- partial "scripts.html" . -}}
</body>
</html>