theme-switch: Improve theme switch logic (#86)

- removes unnecessary local-storage item removal
- less inline script on build
- assumes `defaultTheme as auto when value is not `dark` or `light`
- should work according to table at docs
This commit is contained in:
Aditya Telange 2020-11-26 09:10:24 +05:30 committed by GitHub
parent 678b5d82fc
commit b301d60f03
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 16 deletions

View File

@ -64,11 +64,5 @@
} }
}) })
</script>
{{- else -}}
{{/* case where owner disables theme button after deployment, this resets the stored theme */}}
<script>
localStorage.removeItem("pref-theme");
</script> </script>
{{- end }} {{- end }}

View File

@ -1,26 +1,23 @@
{{- /* theme-toggle is enabled */}}
{{- if (not .Site.Params.disableThemeToggle) }}
{{- /* theme is light */}}
{{- if (eq .Site.Params.defaultTheme "light") }} {{- if (eq .Site.Params.defaultTheme "light") }}
<script> <script>
if (localStorage.getItem("pref-theme") === "dark") { if (localStorage.getItem("pref-theme") === "dark") {
document.body.classList.add('dark'); document.body.classList.add('dark');
} else if (localStorage.getItem("pref-theme") === "light") {
document.body.classList.remove('dark')
} else {
document.body.classList.remove('dark')
} }
</script> </script>
{{- /* theme is dark */}}
{{- else if (eq .Site.Params.defaultTheme "dark") }} {{- else if (eq .Site.Params.defaultTheme "dark") }}
<script> <script>
if (localStorage.getItem("pref-theme") === "dark") { if (localStorage.getItem("pref-theme") === "light") {
document.body.classList.add('dark');
} else if (localStorage.getItem("pref-theme") === "light") {
document.body.classList.remove('dark') document.body.classList.remove('dark')
} else {
document.body.classList.add('dark');
} }
</script> </script>
{{- else if (or (eq .Site.Params.defaultTheme "auto") (not .Site.Params.disableThemeToggle) ) }} {{- else }}
{{- /* theme is auto */}}
<script> <script>
if (localStorage.getItem("pref-theme") === "dark") { if (localStorage.getItem("pref-theme") === "dark") {
document.body.classList.add('dark'); document.body.classList.add('dark');
@ -30,6 +27,15 @@
document.body.classList.add('dark'); document.body.classList.add('dark');
} }
</script>
{{- end }}
{{- /* theme-toggle is disabled and theme is auto */}}
{{- else if (and (ne .Site.Params.defaultTheme "light") (ne .Site.Params.defaultTheme "dark"))}}
<script>
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
</script> </script>
{{- end }} {{- end }}
<noscript> <noscript>