diff --git a/src/BootstrapBlazor.Server/Components/Components/Pre.razor.cs b/src/BootstrapBlazor.Server/Components/Components/Pre.razor.cs
index 90133402d80..7077a5f9adc 100644
--- a/src/BootstrapBlazor.Server/Components/Components/Pre.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Components/Pre.razor.cs
@@ -29,10 +29,6 @@ public partial class Pre
     [NotNull]
     private CodeSnippetService? CodeSnippetService { get; set; }
 
-    [Inject]
-    [NotNull]
-    private IThemeProvider? ThemeProviderService { get; set; }
-
     /// <summary>
     /// 获得/设置 子组件 CodeFile 为空时生效
     /// </summary>
@@ -71,16 +67,6 @@ public partial class Pre
 
     private string? CopiedText { get; set; }
 
-    /// <summary>
-    /// <inheritdoc/>
-    /// </summary>
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-
-        ThemeProviderService.ThemeChangedAsync += OnThemeChanged;
-    }
-
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -203,12 +189,4 @@ private string FindCodeSnippetByName(string code)
 
     [GeneratedRegex(@"<Tips[\s\S]*>[\s\S]*?</Tips>")]
     private static partial Regex TipsRegex();
-
-    private async Task OnThemeChanged(string themeName)
-    {
-        if (themeName == "light" || themeName == "dark")
-        {
-            await InvokeVoidAsync("switchTheme", themeName);
-        }
-    }
 }
diff --git a/src/BootstrapBlazor.Server/Components/Components/Pre.razor.js b/src/BootstrapBlazor.Server/Components/Components/Pre.razor.js
index 54d82b2be68..8c412668f0b 100644
--- a/src/BootstrapBlazor.Server/Components/Components/Pre.razor.js
+++ b/src/BootstrapBlazor.Server/Components/Components/Pre.razor.js
@@ -1,4 +1,4 @@
-import { copy, getDescribedElement, addLink, removeLink, addScript, getHeight, getPreferredTheme } from "../../_content/BootstrapBlazor/modules/utility.js"
+import { copy, getDescribedElement, addLink, removeLink, addScript, getHeight, getPreferredTheme, registerBootstrapBlazorModule } from "../../_content/BootstrapBlazor/modules/utility.js"
 import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js"
 
 export async function init(id, title, assetRoot) {
@@ -48,6 +48,15 @@ export async function init(id, title, assetRoot) {
             preElement.style.maxHeight = `${preHeight}px`
         })
     }
+
+    registerBootstrapBlazorModule('Pre', id, () => {
+        EventHandler.on(document, 'changed.bb.theme', updateTheme);
+    });
+}
+
+const updateTheme = e => {
+    const theme = e.theme;
+    switchTheme(theme);
 }
 
 export async function highlight(id) {
@@ -96,7 +105,12 @@ export function dispose(id) {
         return
     }
 
-    EventHandler.off(el, 'click', '.btn-copy')
-    EventHandler.off(el, 'click', '.btn-plus')
-    EventHandler.off(el, 'click', '.btn-minus')
+    EventHandler.off(el, 'click', '.btn-copy');
+    EventHandler.off(el, 'click', '.btn-plus');
+    EventHandler.off(el, 'click', '.btn-minus');
+
+    const { Pre } = window.BootstrapBlazor;
+    Pre.dispose(id, () => {
+        EventHandler.off(document, 'changed.bb.theme', updateTheme);
+    });
 }
diff --git a/src/BootstrapBlazor/wwwroot/modules/base-popover.js b/src/BootstrapBlazor/wwwroot/modules/base-popover.js
index eb56a9ef373..d062b18140c 100644
--- a/src/BootstrapBlazor/wwwroot/modules/base-popover.js
+++ b/src/BootstrapBlazor/wwwroot/modules/base-popover.js
@@ -17,7 +17,7 @@ const Popover = {
                 initCallback: null,
                 hideCallback: null
             },
-            ...(config ?? {})
+            ...(config || {})
         }
         const createPopover = () => {
             if (!popover.isDisabled()) {
diff --git a/src/BootstrapBlazor/wwwroot/modules/utility.js b/src/BootstrapBlazor/wwwroot/modules/utility.js
index a8cf06a0271..f8e6f86aeab 100644
--- a/src/BootstrapBlazor/wwwroot/modules/utility.js
+++ b/src/BootstrapBlazor/wwwroot/modules/utility.js
@@ -1,4 +1,6 @@
-const vibrate = () => {
+import EventHandler from "./event-handler.js"
+
+const vibrate = () => {
     if ('vibrate' in window.navigator) {
         window.navigator.vibrate([200, 100, 200])
         const handler = window.setTimeout(function () {
@@ -754,6 +756,7 @@ export function setTheme(theme, sync) {
         })
         saveTheme(theme);
     }
+    EventHandler.trigger(document, 'changed.bb.theme', { theme: theme });
 }
 
 export function setActiveTheme(el, activeItem) {