Merge pull request #36 from hsand/master

Add dark mode toggle
This commit is contained in:
Athul Cyriac Ajay 2021-09-26 01:50:43 +05:30 committed by GitHub
commit ddcd4cdcfc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 31 additions and 3 deletions

View file

@ -14,6 +14,7 @@ Forked from [Ezhil Theme](https://github.com/vividvilla/ezhil)
- Callouts - Callouts
- Tags - Tags
- Auto Dark Mode(based on system theme) - Auto Dark Mode(based on system theme)
- Dark/Light Mode toggle
- tl:dr; frontamatter - tl:dr; frontamatter
- Cache busting for CSS files - Cache busting for CSS files
@ -75,7 +76,7 @@ pygmentscodefencesguesssyntax = true
paginate=3 # articles per page paginate=3 # articles per page
[params] [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. 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)" subtitle = "Minimal and Clean [blog theme for Hugo](https://github.com/athul/archie)"

View file

@ -6,5 +6,9 @@
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
<a href="{{ .URL }}">{{ .Name }}</a> <a href="{{ .URL }}">{{ .Name }}</a>
{{ end }} {{ 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> </nav>
</header> </header>

View file

@ -39,9 +39,9 @@
{{ $style := resources.Get "css/main.css" | fingerprint }} {{ $style := resources.Get "css/main.css" | fingerprint }}
<link rel="stylesheet" type="text/css" media="screen" href="{{ $style.Permalink }}" /> <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 }} {{ $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 }} {{ end }}
<!-- Custom CSS style get applied last --> <!-- Custom CSS style get applied last -->

23
static/js/themetoggle.js Normal file
View file

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