Browse Source

Merge pull request #14 from fteem/add-darkscheme-toggle

Add dark mode toggle to site header
main
Kailash Nadh 2 years ago
committed by GitHub
parent
commit
be55e9b73c
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 68 additions and 2 deletions
  1. +3
    -0
      layouts/partials/head.html
  2. +2
    -2
      layouts/partials/header.html
  3. +18
    -0
      static/css/main.css
  4. +45
    -0
      static/js/main.js

+ 3
- 0
layouts/partials/head.html View File

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


+ 2
- 2
layouts/partials/header.html View File

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


+ 18
- 0
static/css/main.css View File

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


+ 45
- 0
static/js/main.js View File

@ -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;
}

Loading…
Cancel
Save