diff --git a/assets/css/styles.css b/assets/css/styles.css
index 0dc9e3b..b549f54 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -13,7 +13,7 @@ html {
}
body {
- @apply bg-white text-gray-900;
+ @apply w-full bg-white dark:bg-dark dark:text-gray-100;
}
:root {
diff --git a/assets/js/theme.js b/assets/js/theme.js
new file mode 100644
index 0000000..3b52b16
--- /dev/null
+++ b/assets/js/theme.js
@@ -0,0 +1,44 @@
+// Dark theme toggle
+// https://flowbite.com/docs/customize/dark-mode/
+
+const themeToggleBtn = document.getElementById("theme-toggle");
+
+const themeToggleDarkIcon = document.getElementById("theme-toggle-dark-icon");
+const themeToggleLightIcon = document.getElementById("theme-toggle-light-icon");
+
+// Change the icons inside the button based on previous settings
+if (
+ localStorage.getItem("color-theme") === "dark" ||
+ (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
+) {
+ themeToggleLightIcon.classList.remove("hidden");
+} else {
+ themeToggleDarkIcon.classList.remove("hidden");
+}
+
+themeToggleBtn.addEventListener("click", function () {
+ // toggle icons inside button
+ themeToggleDarkIcon.classList.toggle("hidden");
+ themeToggleLightIcon.classList.toggle("hidden");
+
+ // if set via local storage previously
+ if (localStorage.getItem("color-theme")) {
+ if (localStorage.getItem("color-theme") === "light") {
+ document.documentElement.classList.add("dark");
+ localStorage.setItem("color-theme", "dark");
+ } else {
+ document.documentElement.classList.remove("dark");
+ localStorage.setItem("color-theme", "light");
+ }
+
+ // if NOT set via local storage previously
+ } else {
+ if (document.documentElement.classList.contains("dark")) {
+ document.documentElement.classList.remove("dark");
+ localStorage.setItem("color-theme", "light");
+ } else {
+ document.documentElement.classList.add("dark");
+ localStorage.setItem("color-theme", "dark");
+ }
+ }
+});
diff --git a/data/icons.yaml b/data/icons.yaml
index 0d1d9c9..fe54875 100644
--- a/data/icons.yaml
+++ b/data/icons.yaml
@@ -26,9 +26,8 @@ hugo-full: >
-theme-light:
-
-theme-dark:
+sun:
+moon:
chevron-right:
warning:
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 65e2aab..bd81e37 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -6,4 +6,5 @@
{{- block "main" . }}{{ end -}}
{{- partial "footer.html" . -}}
+ {{ partial "scripts.html" . }}