fixed theme-switcher flickering issue

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
 )

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 }}

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": {