diff options
author | Kailash Nadh <kailash@nadh.in> | 2020-04-11 17:18:25 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-04-11 17:18:25 +0300 |
commit | be55e9b73cb87a2072aab709f4340f7bdc33fa84 (patch) | |
tree | 883b09680980e152f618296250236d9725476002 | |
parent | de7cc93638f7769d04aee1d2d0c5ead46456f483 (diff) | |
parent | 4b0aa0f9c7a772dd7dcabf6a30f0645d01413a6c (diff) |
Merge pull request #14 from fteem/add-darkscheme-toggle
Add dark mode toggle to site header
-rw-r--r-- | layouts/partials/head.html | 3 | ||||
-rw-r--r-- | layouts/partials/header.html | 4 | ||||
-rw-r--r-- | static/css/main.css | 18 | ||||
-rw-r--r-- | static/js/main.js | 45 |
4 files changed, 68 insertions, 2 deletions
diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 8d1a6f1..32c5ae7 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -18,6 +18,9 @@ {{- end -}} </ul> </nav> + {{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") -}} + <span class="scheme-toggle"><a href="#" id="scheme-toggle"></a> + {{- end -}} </div> <nav class="nav"> diff --git a/layouts/partials/header.html b/layouts/partials/header.html index dde44f0..45b651e 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -28,9 +28,9 @@ <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}{{ .Site.Params.customCSS }}" /> {{ end }} {{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") -}} - <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/dark.css" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} /> + <link id="dark-scheme" rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/dark.css" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} /> {{- if isset .Site.Params "customdarkcss" }} - <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}{{ .Site.Params.customDarkCSS }}" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} /> + <link id="dark-scheme" rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}{{ .Site.Params.customDarkCSS }}" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} /> {{- end }} {{- end }} diff --git a/static/css/main.css b/static/css/main.css index fc0dd36..54640a9 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -270,6 +270,24 @@ ul { max-height: 15px; } +.header .site-description .scheme-toggle { + height: 100%; +} + +.header .site-description .scheme-toggle a svg { + max-height: 15px; +} + +.header .site-description .scheme-toggle a.dark svg { + fill: #f8e04f; + color: #f8e04f; +} + +.header .site-description .scheme-toggle a.light svg { + fill: grey; + color: black; +} + .section .section-header { font-size: 0.75rem; font-weight: 600; diff --git a/static/js/main.js b/static/js/main.js index e69de29..14fc77b 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -0,0 +1,45 @@ +document.addEventListener("DOMContentLoaded", function(){ + var toggle = document.getElementById("scheme-toggle"); + + var scheme = "light"; + var savedScheme = localStorage.getItem("scheme"); + + var darkScheme = document.getElementById("dark-scheme"); + var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; + + if (prefersDark) { + scheme = "dark"; + } + + if(savedScheme) { + scheme = savedScheme; + } + + if(scheme == "dark") { + darkscheme(toggle, darkScheme); + } else { + lightscheme(toggle, darkScheme); + } + + toggle.addEventListener("click", () => { + if (toggle.className === "light") { + darkscheme(toggle, darkScheme); + } else if (toggle.className === "dark") { + lightscheme(toggle, darkScheme); + } + }); +}); + +function darkscheme(toggle, darkScheme) { + localStorage.setItem("scheme", "dark"); + toggle.innerHTML = feather.icons.sun.toSvg(); + toggle.className = "dark"; + darkScheme.disabled = false; +} + +function lightscheme(toggle, darkScheme) { + localStorage.setItem("scheme", "light"); + toggle.innerHTML = feather.icons.moon.toSvg(); + toggle.className = "light"; + darkScheme.disabled = true; +} |