From 3334b7bc9be285c4dee81181d7c61031d9f18363 Mon Sep 17 00:00:00 2001
From: Somrat <58769763+tfsomrat@users.noreply.github.com>
Date: Wed, 25 Sep 2024 11:48:42 +0600
Subject: [PATCH] fixed theme-switcher flickering issue

---
 exampleSite/go.mod                              |  2 +-
 layouts/partials/components/theme-switcher.html | 16 ++++++++++++----
 package.json                                    |  2 +-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/exampleSite/go.mod b/exampleSite/go.mod
index 7003389..85e38cf 100644
--- a/exampleSite/go.mod
+++ b/exampleSite/go.mod
@@ -27,5 +27,5 @@ require (
 	github.com/gethugothemes/hugo-modules/table-of-contents v0.0.0-20240925042433-d2b5d05977e8 // indirect
 	github.com/gethugothemes/hugo-modules/videos v0.0.0-20240925042433-d2b5d05977e8 // indirect
 	github.com/hugomods/mermaid v0.1.4 // indirect
-	github.com/zeon-studio/hugoplate v0.0.0-20240925040917-e6d108168086 // indirect
+	github.com/zeon-studio/hugoplate v0.0.0-20240925044951-fe74d0e62893 // indirect
 )
diff --git a/layouts/partials/components/theme-switcher.html b/layouts/partials/components/theme-switcher.html
index 2f8e873..309cbd2 100644
--- a/layouts/partials/components/theme-switcher.html
+++ b/layouts/partials/components/theme-switcher.html
@@ -1,7 +1,7 @@
 <!-- theme switcher -->
 {{ $class := .Class }}
 {{ if site.Params.theme_switcher }}
-  <div class="theme-switcher {{ $class }}">
+  <div class="theme-switcher {{ $class }} hidden">
     <input id="theme-switcher" data-theme-switcher type="checkbox" />
     <label for="theme-switcher">
       <span class="sr-only">theme switcher</span>
@@ -43,12 +43,17 @@
 
     if (localStorage.getItem("theme") === "dark"){darkMode = true}
     else if (localStorage.getItem("theme") === "light"){darkMode = false}
-    if (darkMode){document.documentElement.classList.toggle("dark")}
-    var themeSwitch = document.querySelectorAll("[data-theme-switcher]");
 
+    if (darkMode){document.documentElement.classList.add("dark")}
+    else {document.documentElement.classList.remove("dark")}
+
+    // Show theme switcher after applying theme
     document.addEventListener("DOMContentLoaded", () => {
+      var themeSwitch = document.querySelectorAll("[data-theme-switcher]");
+      var themeSwitcherContainer = document.querySelector('.theme-switcher');
+
       [].forEach.call(themeSwitch, function (ts) {
-        ts.checked = darkMode ? true : false;
+        ts.checked = darkMode;
         ts.addEventListener("click", () => {
           document.documentElement.classList.toggle("dark");
           localStorage.setItem(
@@ -57,6 +62,9 @@
           );
         });
       });
+
+      // Now make the switcher visible
+      themeSwitcherContainer.classList.remove('hidden');
     });
   </script>
 {{ end }}
diff --git a/package.json b/package.json
index 08edac3..f439481 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "hugoplate",
   "description": "hugo tailwindcss boilerplate",
-  "version": "1.16.0",
+  "version": "1.16.1",
   "license": "MIT",
   "author": "zeon.studio",
   "scripts": {