diff --git a/site/plugins/dark-theme-toggle.css b/site/plugins/dark-theme-toggle.css
index 463a79174..2b3bcb506 100644
--- a/site/plugins/dark-theme-toggle.css
+++ b/site/plugins/dark-theme-toggle.css
@@ -1,4 +1,4 @@
-#docsify-dark-theme-toggle {
+.docsify-dark-theme-toggle {
   position: absolute;
   display: inline-block;
   width: 52px;
@@ -13,30 +13,38 @@
 .sidebar > .app-name {
   position: relative;
 }
-.app-name > #docsify-dark-theme-toggle {
+.app-name > .docsify-dark-theme-toggle {
   margin-right: 1rem;
   margin-top: 0;
   right: 0;
   left: unset;
+  transition: opacity 250ms ease;
+  opacity: 0.0;
+  pointer-events: none;
 }
-#docsify-dark-theme-toggle::before, #docsify-dark-theme-toggle::after {
+.sticky .app-name > .docsify-dark-theme-toggle {
+  opacity: 1.0;
+  pointer-events: auto;
+}
+
+.docsify-dark-theme-toggle::before, .docsify-dark-theme-toggle::after {
   position: absolute;
   top: 0.1em;
   font-size: 16px;
   transition: opacity 0.3s;
 }
-#docsify-dark-theme-toggle::before {
+.docsify-dark-theme-toggle::before {
   content: "🌙";
   left: 0.1em;
   opacity: 0;
   z-index: 1;
 }
-#docsify-dark-theme-toggle::after {
+.docsify-dark-theme-toggle::after {
   content: "🌞";
   right: 0.1em;
   opacity: 1;
 }
-#docsify-dark-theme-toggle > span {
+.docsify-dark-theme-toggle > span {
   position: absolute;
   top: 0;
   left: 0;
@@ -46,7 +54,7 @@
   border-radius: 28px;
   transition: background-color 0.3s;
 }
-#docsify-dark-theme-toggle > span::before {
+.docsify-dark-theme-toggle > span::before {
   content: "";
   position: absolute;
   height: 22px;
@@ -58,15 +66,15 @@
   border-radius: 50%;
   transition: transform 0.3s;
 }
-.dark #docsify-dark-theme-toggle::after {
+.dark .docsify-dark-theme-toggle::after {
   opacity: 0;
 }
-.dark #docsify-dark-theme-toggle::before {
+.dark .docsify-dark-theme-toggle::before {
   opacity: 1;
 }
-.dark #docsify-dark-theme-toggle > span {
+.dark .docsify-dark-theme-toggle > span {
   background-color: var(--theme-color, #ea6f5a);
 }
-.dark #docsify-dark-theme-toggle > span::before {
+.dark .docsify-dark-theme-toggle > span::before {
   transform: translateX(24px);
-}
\ No newline at end of file
+}
diff --git a/site/plugins/dark-theme-toggle.js b/site/plugins/dark-theme-toggle.js
index 13c2e68e9..e6f74cfff 100644
--- a/site/plugins/dark-theme-toggle.js
+++ b/site/plugins/dark-theme-toggle.js
@@ -3,7 +3,6 @@
     const TOGGLE_ID = "docsify-dark-theme-toggle",
       dom = Docsify.dom,
       darkThemeStyleSheet = dom.find('link[href$="dark.css"]'),
-      toggleEl = dom.create("div", "<span />"),
       applyTheme = (swap = false) => {
         const isDark = Boolean(swap ^ (localStorage[TOGGLE_ID] == "true"));
         localStorage[TOGGLE_ID] = isDark;
@@ -11,10 +10,18 @@
         dom.toggleClass(dom.body, isDark ? "add" : "remove", "dark");
       };
     localStorage[TOGGLE_ID] ??= matchMedia("(prefers-color-scheme: dark)").matches;
-    toggleEl.id = TOGGLE_ID;
-    dom.on(toggleEl, "click", () => applyTheme(true));
     hook.init(applyTheme);
-    hook.doneEach(() => dom.before(dom.find(".cover.show, .sidebar > .app-name"), toggleEl));
+    hook.doneEach(() => {
+      dom.findAll(".cover.show, .sidebar > .app-name").forEach((target) => {
+        let toggleEl = dom.find(target, `.${TOGGLE_ID}`);
+        if (null == toggleEl) {
+          toggleEl = dom.create("div", "<span />");
+          toggleEl.className = TOGGLE_ID;
+          dom.on(toggleEl, "click", () => applyTheme(true));
+        }
+        dom.before(target, toggleEl);
+      });
+    });
   };
   $docsify ??= {};
   $docsify.plugins = [...($docsify.plugins ?? []), darkThemeTogglePlugin];