theme: set proper conditions
for having default-theme with theme-toggle * can set/unset default theme * for default-theme: dark/light : theme-toggle will not be visible * theme-toggle with defaultheme: auto is functional fixes #25 for #15
This commit is contained in:
parent
994c0b56e1
commit
a9e00a3640
|
@ -49,7 +49,7 @@
|
||||||
localStorage.setItem("menu-scroll-position", document.getElementById('menu').scrollLeft);
|
localStorage.setItem("menu-scroll-position", document.getElementById('menu').scrollLeft);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
{{- if not .Site.Params.disableThemeToggle }}
|
{{- if (and (not .Site.Params.disableThemeToggle) (not (or (eq .Site.Params.defaultTheme "light") (eq .Site.Params.defaultTheme "dark")))) }}
|
||||||
<script>
|
<script>
|
||||||
document.getElementById("theme-toggle").addEventListener("click", () => {
|
document.getElementById("theme-toggle").addEventListener("click", () => {
|
||||||
if (document.body.className.includes("dark")) {
|
if (document.body.className.includes("dark")) {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
{{- if eq .Site.Params.defaultTheme "auto" }}
|
{{- if (and (not .Site.Params.disableThemeToggle) (not (or (eq .Site.Params.defaultTheme "light") (eq .Site.Params.defaultTheme "dark")))) }}
|
||||||
<script>
|
<script>
|
||||||
// load memory
|
// load memory
|
||||||
if (localStorage.getItem("pref-theme") === "dark") {
|
if (localStorage.getItem("pref-theme") === "dark") {
|
||||||
|
@ -12,6 +12,13 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
|
{{- if (and (.Site.Params.disableThemeToggle) (eq .Site.Params.defaultTheme "auto")) }}
|
||||||
|
<script>
|
||||||
|
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||||
|
document.body.classList.add('dark');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
{{- end }}
|
||||||
<noscript>
|
<noscript>
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
.theme-toggle,
|
.theme-toggle,
|
||||||
|
@ -24,7 +31,7 @@
|
||||||
<nav class="nav">
|
<nav class="nav">
|
||||||
<p class="logo">
|
<p class="logo">
|
||||||
<a href="{{ "" | absLangURL }}">{{ .Site.Title }}</a>
|
<a href="{{ "" | absLangURL }}">{{ .Site.Title }}</a>
|
||||||
{{- if not .Site.Params.disableThemeToggle }}
|
{{- if (and (not .Site.Params.disableThemeToggle) (not (or (eq .Site.Params.defaultTheme "light") (eq .Site.Params.defaultTheme "dark")))) }}
|
||||||
<span class="theme-toggle">
|
<span class="theme-toggle">
|
||||||
<a id="theme-toggle">
|
<a id="theme-toggle">
|
||||||
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
|
||||||
|
|
Loading…
Reference in New Issue