diff options
Diffstat (limited to 'layouts/partials')
| -rw-r--r-- | layouts/partials/footer.html | 38 | ||||
| -rw-r--r-- | layouts/partials/header.html | 8 |
2 files changed, 42 insertions, 4 deletions
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 69e3e66..23ddffd 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,8 +1,44 @@ <div class="copyright"> {{ .Site.Params.footer.content | markdownify }} - <div class="rss-icon"> + <div class="footer-item"> <a href="/rss"> <i class="fa fa-rss">🛜</i> </a> </div> + <div class="footer-item"> + <button id="toggle-theme-btn">🌞/🌙</button> + </div> + </div> +<script> + console.log("Loaded") + const modes = { + Dark: "dark", + Light: "light", + } + + function getCurrentMode() { + let mode = localStorage.getItem("theme"); + return mode === null ? null : mode; + } + + const toggleColorSchemeBtn = document.getElementById("toggle-theme-btn"); + const body = document.body; + const currentMode = getCurrentMode() + + if (currentMode === modes.Dark) { + body.classList.toggle("dark-mode") + } + + + toggleColorSchemeBtn.addEventListener("click", () => { + body.classList.toggle("dark-mode"); + + if (body.classList.contains("dark-mode")) { + localStorage.setItem("theme", modes.Dark); + } else { + localStorage.setItem("theme", modes.Light); + } + }) + +</script> diff --git a/layouts/partials/header.html b/layouts/partials/header.html index e3aed0f..73e5aaf 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,4 +1,6 @@ -<a href="{{ "" | relURL }}" class="title"> - <h1 class="site-title">{{ .Site.Title }}</h1> -</a> +<div class="title"> + <a href="{{ "" | relURL }}"> + <h1 class="site-title">{{ .Site.Title }}</h1> + </a> +</div> <nav>{{- partial "nav.html" . -}}</nav> |