forked from drowl87/hextra_mirror
97e6945c04
resolves #135 Light / dark theme can be configured via: ```yaml theme: # light | dark | system default: system displayToggle: true ```
59 lines
1.8 KiB
HTML
59 lines
1.8 KiB
HTML
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
{{ if hugo.IsProduction -}}
|
||
<meta name="robots" content="index, follow" />
|
||
{{ else -}}
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
{{ end -}}
|
||
{{ partialCached "favicons.html" . }}
|
||
<title>
|
||
{{- if .IsHome -}}
|
||
{{ .Site.Title -}}
|
||
{{ else -}}
|
||
{{ with .Title }}{{ . }} – {{ end -}}
|
||
{{ .Site.Title -}}
|
||
{{ end -}}
|
||
</title>
|
||
<meta name="description" content="{{ partial "utils/page-description.html" . }}" />
|
||
|
||
{{ partial "opengraph.html" . }}
|
||
{{ template "_internal/schema.html" . -}}
|
||
{{ template "_internal/twitter_cards.html" . -}}
|
||
|
||
{{ partialCached "head-css.html" . }}
|
||
|
||
|
||
<!-- Google Analytics -->
|
||
{{- if and .Site.GoogleAnalytics (eq hugo.Environment "production") }}
|
||
<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin />
|
||
{{ partial "google-analytics.html" . }}
|
||
{{- end }}
|
||
|
||
|
||
<script>
|
||
/* Initialize light/dark mode */
|
||
const defaultTheme = '{{ site.Params.theme.default | default `system`}}';
|
||
|
||
const setDarkTheme = () => {
|
||
document.documentElement.classList.add("dark");
|
||
document.documentElement.style.colorScheme = "dark";
|
||
}
|
||
const setLightTheme = () => {
|
||
document.documentElement.classList.remove("dark");
|
||
document.documentElement.style.colorScheme = "light";
|
||
}
|
||
|
||
if ("color-theme" in localStorage) {
|
||
localStorage.getItem("color-theme") === "dark" ? setDarkTheme() : setLightTheme();
|
||
} else {
|
||
defaultTheme === "dark" ? setDarkTheme() : setLightTheme();
|
||
if (defaultTheme === "system") {
|
||
window.matchMedia("(prefers-color-scheme: dark)").matches ? setDarkTheme() : setLightTheme();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
{{ partial "custom/head-end.html" . }}
|
||
</head>
|