commit
ddcd4cdcfc
|
@ -14,6 +14,7 @@ Forked from [Ezhil Theme](https://github.com/vividvilla/ezhil)
|
|||
- Callouts
|
||||
- Tags
|
||||
- Auto Dark Mode(based on system theme)
|
||||
- Dark/Light Mode toggle
|
||||
- tl:dr; frontamatter
|
||||
- Cache busting for CSS files
|
||||
|
||||
|
@ -75,7 +76,7 @@ pygmentscodefencesguesssyntax = true
|
|||
paginate=3 # articles per page
|
||||
|
||||
[params]
|
||||
mode="auto" # color-mode → light,dark or auto
|
||||
mode="auto" # color-mode → light,dark,toggle or auto
|
||||
useCDN=false # don't use CDNs for fonts and icons, instead serve them locally.
|
||||
subtitle = "Minimal and Clean [blog theme for Hugo](https://github.com/athul/archie)"
|
||||
|
||||
|
|
|
@ -6,5 +6,9 @@
|
|||
{{ range .Site.Menus.main }}
|
||||
<a href="{{ .URL }}">{{ .Name }}</a>
|
||||
{{ end }}
|
||||
{{ if eq .Site.Params.mode "toggle" -}}
|
||||
| <a id="dark-mode-toggle" onclick="toggleTheme()" href=""></a>
|
||||
<script src="{{ .Site.BaseURL }}js/themetoggle.js"></script>
|
||||
{{ end }}
|
||||
</nav>
|
||||
</header>
|
||||
|
|
|
@ -39,9 +39,9 @@
|
|||
{{ $style := resources.Get "css/main.css" | fingerprint }}
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="{{ $style.Permalink }}" />
|
||||
|
||||
{{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") -}}
|
||||
{{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") (eq .Site.Params.mode "toggle") -}}
|
||||
{{ $darkstyle := resources.Get "css/dark.css" | fingerprint }}
|
||||
<link rel="stylesheet" type="text/css" href="{{ $darkstyle.Permalink }}" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} />
|
||||
<link id="darkModeStyle" rel="stylesheet" type="text/css" href="{{ $darkstyle.Permalink }}" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} {{ if eq .Site.Params.mode "toggle" }}disabled{{ end }} />
|
||||
{{ end }}
|
||||
|
||||
<!-- Custom CSS style get applied last -->
|
||||
|
|
|
@ -0,0 +1,23 @@
|
|||
function setTheme(mode) {
|
||||
localStorage.setItem("theme-storage", mode);
|
||||
if (mode === "dark") {
|
||||
document.getElementById("darkModeStyle").disabled=false;
|
||||
document.getElementById("dark-mode-toggle").innerHTML = "<i data-feather=\"sun\"></i>";
|
||||
feather.replace()
|
||||
} else if (mode === "light") {
|
||||
document.getElementById("darkModeStyle").disabled=true;
|
||||
document.getElementById("dark-mode-toggle").innerHTML = "<i data-feather=\"moon\"></i>";
|
||||
feather.replace()
|
||||
}
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
if (localStorage.getItem("theme-storage") === "light") {
|
||||
setTheme("dark");
|
||||
} else if (localStorage.getItem("theme-storage") === "dark") {
|
||||
setTheme("light");
|
||||
}
|
||||
}
|
||||
|
||||
var savedTheme = localStorage.getItem("theme-storage") || "light";
|
||||
setTheme(savedTheme);
|
Loading…
Reference in New Issue