Git/hugo-theme-wondermod
1
0
Fork 0
mirror of https://github.com/Wonderfall/hugo-WonderMod.git synced 2025-10-31 03:45:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

theme-switch: Enable theme toggle unless specifically disabled (#69)

Browse Source 
Co-authored-by: Aditya Telange <21258296+adityatelange@users.noreply.github.com>
This commit is contained in:
Itay Cohen
2020-11-04 10:34:45 +02:00
committed by GitHub
parent 12b6b132e4
commit 3064e8cfc5
2 changed files with 22 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
layouts/partials/footer.html
View File

@@ -50,7 +50,7 @@
localStorage.setItem("menu-scroll-position", document.getElementById('menu').scrollLeft);
}
</script>
{{- if (and (not .Site.Params.disableThemeToggle) (not (or (eq .Site.Params.defaultTheme "light") (eq .Site.Params.defaultTheme "dark")))) }}
{{- if (not .Site.Params.disableThemeToggle) }}
<script>
document.getElementById("theme-toggle").addEventListener("click", () => {
if (document.body.className.includes("dark")) {
@@ -63,7 +63,7 @@
})
</script>
{{- else -}}
<!-- case where owner disables theme button after deployment, this resets the stored theme -->
{{/* case where owner disables theme button after deployment, this resets the stored theme */}}
<script>
localStorage.removeItem("pref-theme");
</script>

29
layouts/partials/header.html
View File

@@ -1,21 +1,32 @@
{{- if (and (not .Site.Params.disableThemeToggle) (not (or (eq .Site.Params.defaultTheme "light") (eq .Site.Params.defaultTheme "dark")))) }}
{{- if (eq .Site.Params.defaultTheme "light") }}
<script>
// load memory
if (localStorage.getItem("pref-theme") === "dark") {
document.body.classList.add('dark');
} else if (localStorage.getItem("pref-theme") === "light") {
document.body.classList.remove('dark')
} else {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
document.body.classList.remove('dark')
}
</script>
{{- end }}
{{- if (and (.Site.Params.disableThemeToggle) (eq .Site.Params.defaultTheme "auto")) }}
{{- else if (eq .Site.Params.defaultTheme "dark") }}
<script>
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
if (localStorage.getItem("pref-theme") === "dark") {
document.body.classList.add('dark');
} else if (localStorage.getItem("pref-theme") === "light") {
document.body.classList.remove('dark')
} else {
document.body.classList.add('dark');
}
</script>
{{- else if (or (eq .Site.Params.defaultTheme "auto") (not .Site.Params.disableThemeToggle) ) }}
<script>
if (localStorage.getItem("pref-theme") === "dark") {
document.body.classList.add('dark');
} else if (localStorage.getItem("pref-theme") === "light") {
document.body.classList.remove('dark')
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
@@ -41,7 +52,7 @@
{{- .Site.Params.label.text | default .Site.Title -}}
</a>
<span class="logo-switches">
{{- if (and (not .Site.Params.disableThemeToggle) (not (or (eq .Site.Params.defaultTheme "light") (eq .Site.Params.defaultTheme "dark")))) }}
{{- if (not .Site.Params.disableThemeToggle) }}
<span class="theme-toggle">
<a id="theme-toggle" accesskey="t">
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"