From e99f44319ac4912a096ec417955bae64dcc67214 Mon Sep 17 00:00:00 2001 From: Xin Date: Sun, 30 Jul 2023 21:50:41 +0100 Subject: [PATCH] feat: add theme switcher to support dark mode --- assets/css/styles.css | 2 +- assets/js/theme.js | 44 +++++++++++++++++++++++++++++++++++ data/icons.yaml | 5 ++-- layouts/_default/baseof.html | 1 + layouts/partials/head.html | 11 ++++++++- layouts/partials/scripts.html | 2 ++ layouts/partials/sidebar.html | 15 ++++++++++++ 7 files changed, 75 insertions(+), 5 deletions(-) create mode 100644 assets/js/theme.js create mode 100644 layouts/partials/scripts.html 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" . }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index b16180f..25f90db 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -8,7 +8,16 @@ {{ $styles := resources.Get "css/styles.css" }} {{ $styles = $styles | resources.PostCSS $options }} {{ if hugo.IsProduction }} - {{ $styles = $styles | minify | fingerprint | resources.PostProcess }} + {{ $styles = $styles | minify | fingerprint | resources.PostProcess }} {{ end }} + + diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html new file mode 100644 index 0000000..6df30e6 --- /dev/null +++ b/layouts/partials/scripts.html @@ -0,0 +1,2 @@ +{{ $themeJS := resources.Get "js/theme.js" }} + diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html index ef3aa42..03931ee 100644 --- a/layouts/partials/sidebar.html +++ b/layouts/partials/sidebar.html @@ -48,4 +48,19 @@ {{ end }} + +
+
+ +
+