Git/hugo-theme-wondermod
1
0
Fork 0
mirror of https://github.com/Wonderfall/hugo-WonderMod.git synced 2024-11-25 03:51:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

theme: set proper conditions

Browse Source 
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:
Aditya Telange 2020-10-05 14:33:48 +05:30
parent 994c0b56e1
commit a9e00a3640
No known key found for this signature in database
GPG Key ID: 82E844EF3DA99E77
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
layouts/partials/footer.html
View File

@ -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")) {
@ -66,4 +66,4 @@
<script> <script>
localStorage.removeItem("pref-theme"); localStorage.removeItem("pref-theme");
</script> </script>
{{- end }} {{- end }}

11
layouts/partials/header.html
View File

@ -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"