67 lines
1.2 KiB
HTML
67 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="{{ or site.Language.LanguageCode site.Language.Lang }}"
|
|
dir="{{ or site.Language.LanguageDirection `ltr` }}">
|
|
|
|
<head>
|
|
{{ partial "head.html" . }}
|
|
{{ partial "ga4.html" . }}
|
|
</head>
|
|
|
|
{{ $theme := "auto"}}
|
|
|
|
{{ with .Param "theme" }}
|
|
{{ $theme = .}}
|
|
{{ end }}
|
|
|
|
<body class="{{ $theme }}">
|
|
|
|
<div class="content">
|
|
<header>
|
|
{{ partial "header.html" . }}
|
|
</header>
|
|
|
|
<main class="main">
|
|
{{ block "main" . }}{{ end }}
|
|
</main>
|
|
</div>
|
|
|
|
<footer>
|
|
{{ partial "footer.html" . }}
|
|
</footer>
|
|
|
|
</body>
|
|
|
|
<script>
|
|
|
|
function isAuto() {
|
|
return document.body.classList.contains("auto");
|
|
}
|
|
|
|
function setTheme() {
|
|
if (!isAuto()) {
|
|
return
|
|
}
|
|
|
|
document.body.classList.remove("auto");
|
|
let cls = "light";
|
|
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
cls = "dark";
|
|
}
|
|
|
|
document.body.classList.add(cls);
|
|
}
|
|
|
|
function invertBody() {
|
|
document.body.classList.toggle("dark");
|
|
document.body.classList.toggle("light");
|
|
}
|
|
|
|
if (isAuto()) {
|
|
window.matchMedia('(prefers-color-scheme: dark)').addListener(invertBody);
|
|
}
|
|
|
|
setTheme();
|
|
|
|
</script>
|
|
|
|
</html> |