doc(Theme): update event handler the float theme button (#4789)

Author: ArgoZhang

src/BootstrapBlazor.Shared/Components/Components/Header.razor.js

@@ -1,6 +1,4 @@
-import { getTheme, switchTheme } from "../../../BootstrapBlazor/modules/utility.js"
-import { switchTheme as syncTheme } from "./Pre.razor.js"
-import Data from "../../../BootstrapBlazor/modules/data.js"
+import { switchTheme as syncTheme } from "./Pre.razor.js"
 import EventHandler from "../../../BootstrapBlazor/modules/event-handler.js"
 
 export function init(id) {
@@ -17,23 +15,6 @@ export function init(id) {
         }
         prevScrollTop = currentScrollTop
     });
-
-    const themeElement = document.querySelector('.icon-theme');
-    if (themeElement) {
-        EventHandler.on(themeElement, 'click', async e => {
-            let theme = getTheme();
-            if (theme === 'dark') {
-                theme = 'light';
-            }
-            else {
-                theme = 'dark';
-            }
-            switchTheme(theme, window.innerWidth, window.innerHeight);
-            await updateTheme(theme);
-        });
-    }
-
-    Data.set(id, themeElement);
 }
 
 export async function updateTheme(theme) {
@@ -42,11 +23,4 @@ export async function updateTheme(theme) {
 
 export function dispose(id) {
     EventHandler.off(document, 'scroll');
-
-    const themeElement = Data.get(id);
-    Data.remove(id);
-
-    if (themeElement) {
-        EventHandler.off(themeElement, 'click');
-    }
 }

src/BootstrapBlazor.Shared/Components/Components/ThemeMode.razor

@@ -1,6 +1,7 @@
-@inherits ComponentBase
+@inherits WebSiteModuleComponentBase
+@attribute [JSModuleAutoLoader("Components/ThemeMode.razor.js")]
 
-<div class="btn btn-circle btn-fade btn-theme-mode icon-theme d-flex">
+<div id="@Id" class="btn btn-circle btn-fade btn-theme-mode icon-theme d-flex">
     <i class="@GetLightIconClassString"></i>
     <i class="@GetDarkIconClassString"></i>
 </div>

src/BootstrapBlazor.Shared/Components/Components/ThemeMode.razor.js

@@ -0,0 +1,26 @@
+import { getTheme, switchTheme } from "../../../BootstrapBlazor/modules/utility.js"
+import EventHandler from "../../../BootstrapBlazor/modules/event-handler.js"
+
+export function init(id) {
+    const el = document.getElementById(id);
+    if (el) {
+        EventHandler.on(el, 'click', e => {
+            let theme = getTheme();
+            if (theme === 'dark') {
+                theme = 'light';
+            }
+            else {
+                theme = 'dark';
+            }
+            switchTheme(theme, window.innerWidth, window.innerHeight);
+        });
+    }
+}
+
+export function dispose(id) {
+    const el = document.getElementById(id);
+
+    if (el) {
+        EventHandler.off(el, 'click');
+    }
+}