{{- end -}} | {{- end -}} | ||||
</ul> | </ul> | ||||
</nav> | </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> | </div> | ||||
<nav class="nav"> | <nav class="nav"> |
<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}{{ .Site.Params.customCSS }}" /> | <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}{{ .Site.Params.customCSS }}" /> | ||||
{{ end }} | {{ end }} | ||||
{{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") -}} | {{- 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" }} | {{- 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 }} | ||||
{{- end }} | {{- end }} | ||||
max-height: 15px; | 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 { | .section .section-header { | ||||
font-size: 0.75rem; | font-size: 0.75rem; | ||||
font-weight: 600; | font-weight: 600; |
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; | |||||
} |