Update Themesite

8 files changed, 59 insertions, 12 deletions

diff --git a/.DS_Store b/.DS_Store
index 07c10f4..7043930 100644
--- a/.DS_Store
+++ b/.DS_Store
diff --git a/.hugo_build.lock b/.hugo_build.lock
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/.hugo_build.lock
diff --git a/config.toml b/config.toml
index a591e67..1e2de6e 100644
--- a/config.toml
+++ b/config.toml
@@ -1,19 +1,21 @@
 baseURL = "https://athul.github.io/archie/"
 languageCode = "en-us"
 title = "Archie"
-theme="archie"
+theme = "archie"
 copyright = "© Athul"
 pygmentsstyle = "monokai"
 pygmentscodefences = true
 pygmentscodefencesguesssyntax = true
-paginate=4
+paginate = 4
+
 [params]
-	favicon="https://img.icons8.com/officel/16/000000/chevron-right.png"
-	og_image="https://raw.githubusercontent.com/athul/archie/master/images/archie-dark.png"
-	mode="auto"
-	useCDN=false
-	subtitle = "Minimal and Clean [blog theme for Hugo](https://github.com/athul/archie)"
-	description = "Archie is a Minimal and Clean theme for Hugo"
+favicon = "https://img.icons8.com/officel/16/000000/chevron-right.png"
+og_image = "https://raw.githubusercontent.com/athul/archie/master/images/archie-dark.png"
+# mode = "auto"
+mode = "toggle"
+useCDN = true
+subtitle = "Minimal and Clean [blog theme for Hugo](https://github.com/athul/archie)"
+description = "Archie is a Minimal and Clean theme for Hugo"
 
 [[params.social]]
 name = "GitHub"
diff --git a/themes/archie/README.md b/themes/archie/README.md
index 34b0011..de2d0e6 100644
--- a/themes/archie/README.md
+++ b/themes/archie/README.md
@@ -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)"
 
diff --git a/themes/archie/assets/css/main.css b/themes/archie/assets/css/main.css
index 17d44e3..cb699f0 100644
--- a/themes/archie/assets/css/main.css
+++ b/themes/archie/assets/css/main.css
@@ -296,3 +296,20 @@ content: 'Markdown';
 background: royalblue;
 color: whitesmoke ;
 }
+
+/* table */
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+table th{
+  padding: 6px 13px;
+  border: 1px solid #dfe2e5;
+  font-size: large;
+}
+
+table td{
+  padding: 6px 13px;
+  border: 1px solid #dfe2e5;
+}
diff --git a/themes/archie/layouts/partials/head.html b/themes/archie/layouts/partials/head.html
index ab3f39d..e8a637a 100644
--- a/themes/archie/layouts/partials/head.html
+++ b/themes/archie/layouts/partials/head.html
@@ -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>
diff --git a/themes/archie/layouts/partials/header.html b/themes/archie/layouts/partials/header.html
index c5ae589..9fed977 100644
--- a/themes/archie/layouts/partials/header.html
+++ b/themes/archie/layouts/partials/header.html
@@ -24,7 +24,7 @@
 	{{- template "_internal/twitter_cards.html" . -}}
 	{{ if and (isset .Site.Params "social") (.Site.Params.useCDN | default false) -}}
 		<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-	{{- else if (isset .Site.Params "social") -}}
+	{{- else if or (isset .Site.Params "social") (eq .Site.Params.mode "toggle") -}}
 		<script src="{{ .Site.BaseURL }}js/feather.min.js"></script>
 	{{ end }}
 	{{ if .Site.Params.useCDN | default false -}}
@@ -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 -->
diff --git a/themes/archie/static/js/themetoggle.js b/themes/archie/static/js/themetoggle.js
new file mode 100644
index 0000000..f8c6dcd
--- /dev/null
+++ b/themes/archie/static/js/themetoggle.js
@@ -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);