diff --git a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
index b21e993d28c..c36305e26c1 100644
--- a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
+++ b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
@@ -596,11 +596,6 @@ void AddData(DemoMenuItem item)
                     Text=Localizer["Empty"],
                     Url = "empty"
                 },
-                new ()
-                {
-                    Text=Localizer["EyeDropper"],
-                    Url = "eye-dropper"
-                },
                 new()
                 {
                     Text = Localizer["FileIcon"],
@@ -1431,6 +1426,11 @@ void AddServices(DemoMenuItem item)
                     Text = Localizer["FullScreen"],
                     Url = "fullscreen"
                 },
+                new ()
+                {
+                    Text=Localizer["EyeDropper"],
+                    Url = "eye-dropper"
+                },
                 new()
                 {
                     Text = Localizer["Festival"],
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index c86ad1948fa..e331fc1f77b 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -4589,7 +4589,7 @@
     "DateTimeRange": "DateTimeRange",
     "Editor": "Editor",
     "EditorForm": "EditorForm",
-    "EyeDropper": "EyeDropper",
+    "EyeDropper": "EyeDropper Service",
     "Input": "Input",
     "InputNumber": "InputNumber",
     "InputGroup": "InputGroup",
@@ -6034,7 +6034,7 @@
     "Numerals": "numeral glyph substitution"
   },
   "BootstrapBlazor.Server.Components.Samples.EyeDroppers": {
-    "EyeDropperTitle": "EyeDropper",
+    "EyeDropperTitle": "EyeDropper Service",
     "EyeDropperDescription": "The <code>EyeDropperService</code> provides a mechanism for creating an eyedropper tool. Using this tool, users can sample colors from their screens, including outside of the browser window.",
     "EyeDropperNormalTitle": "Basic usage",
     "EyeDropperNormalIntro": "Using the <code>EyeDropperService</code> application can start the eyedropper mode. Once started, the cursor changes to indicate to the user that the mode is active. The user can then either select a color from anywhere on the screen, or dismiss the eyedropper mode by pressing <kbd>Escape</kbd>",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index c05ff2c0500..7abd68fc104 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -4589,7 +4589,7 @@
     "DateTimeRange": "时间范围框 DateTimeRange",
     "Editor": "富文本框 Editor",
     "EditorForm": "表单编辑框 EditorForm",
-    "EyeDropper": "取色服务 EyeDropper",
+    "EyeDropper": "取色服务 EyeDropperService",
     "Input": "输入框 Input",
     "InputNumber": "数字框 InputNumber",
     "InputGroup": "输入组 InputGroup",
@@ -6034,7 +6034,7 @@
     "Numerals": "数字符号集合"
   },
   "BootstrapBlazor.Server.Components.Samples.EyeDroppers": {
-    "EyeDropperTitle": "屏幕取色 EyeDropper",
+    "EyeDropperTitle": "屏幕取色 EyeDropperService",
     "EyeDropperDescription": "用户可以从屏幕上采样颜色，包括在浏览器窗口之外",
     "EyeDropperNormalTitle": "基础用法",
     "EyeDropperNormalIntro": "使用 <code>EyeDropperService</code>，可以启动吸管模式。启动后，光标会发生变化以向用户指示该模式处于活动状态。然后用户可以从屏幕上的任何位置选择一种颜色，通过按 <kbd>Escape</kbd> 关闭吸管模式",
diff --git a/src/BootstrapBlazor/Components/BaseComponents/BootstrapBlazorRoot.razor b/src/BootstrapBlazor/Components/BaseComponents/BootstrapBlazorRoot.razor
index 7037643218e..1dd8c4281d1 100644
--- a/src/BootstrapBlazor/Components/BaseComponents/BootstrapBlazorRoot.razor
+++ b/src/BootstrapBlazor/Components/BaseComponents/BootstrapBlazorRoot.razor
@@ -3,7 +3,6 @@
 
 @RenderBody()
 
-<EyeDropper></EyeDropper>
 <Title></Title>
 
 <Message @ref="MessageContainer"></Message>
@@ -14,7 +13,7 @@
 <ConnectionHub></ConnectionHub>
 <Mask></Mask>
 
-@foreach(var com in Generators)
+@foreach (var com in Generators)
 {
     @com.Generator()
 }
diff --git a/src/BootstrapBlazor/Components/EyeDropper/EyeDropper.cs b/src/BootstrapBlazor/Components/EyeDropper/EyeDropper.cs
deleted file mode 100644
index d58d9e4260a..00000000000
--- a/src/BootstrapBlazor/Components/EyeDropper/EyeDropper.cs
+++ /dev/null
@@ -1,50 +0,0 @@
-// Licensed to the .NET Foundation under one or more agreements.
-// The .NET Foundation licenses this file to you under the Apache 2.0 License
-// See the LICENSE file in the project root for more information.
-// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
-
-namespace BootstrapBlazor.Components;
-
-/// <summary>
-/// EyeDropper 组件
-/// </summary>
-[BootstrapModuleAutoLoader(ModuleName = "eye-dropper", AutoInvokeInit = false, AutoInvokeDispose = false)]
-public class EyeDropper : BootstrapModuleComponentBase
-{
-    /// <summary>
-    /// EyeDropperService 服务实例
-    /// </summary>
-    [Inject]
-    [NotNull]
-    private EyeDropperService? EyeDropperService { get; set; }
-
-    /// <summary>
-    /// OnInitialized 方法
-    /// </summary>
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-
-        // 注册 EyeDropperService 弹窗事件
-        EyeDropperService.Register(this, Pick);
-    }
-
-    private async Task Pick(EyeDropperOption option)
-    {
-        option.Value = await InvokeAsync<string>("open");
-    }
-
-    /// <summary>
-    /// <inheritdoc/>
-    /// </summary>
-    /// <param name="disposing"></param>
-    protected override async ValueTask DisposeAsync(bool disposing)
-    {
-        if (disposing)
-        {
-            EyeDropperService.UnRegister(this);
-        }
-
-        await base.DisposeAsync(disposing);
-    }
-}
diff --git a/src/BootstrapBlazor/Components/EyeDropper/EyeDropperOption.cs b/src/BootstrapBlazor/Components/EyeDropper/EyeDropperOption.cs
deleted file mode 100644
index 2bfe4c4a623..00000000000
--- a/src/BootstrapBlazor/Components/EyeDropper/EyeDropperOption.cs
+++ /dev/null
@@ -1,17 +0,0 @@
-// Licensed to the .NET Foundation under one or more agreements.
-// The .NET Foundation licenses this file to you under the Apache 2.0 License
-// See the LICENSE file in the project root for more information.
-// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
-
-namespace BootstrapBlazor.Components;
-
-/// <summary>
-/// EyeDropper 配置类
-/// </summary>
-public class EyeDropperOption
-{
-    /// <summary>
-    /// 获得/设置 回调方法
-    /// </summary>
-    public string? Value { get; set; }
-}
diff --git a/src/BootstrapBlazor/Components/EyeDropper/EyeDropperService.cs b/src/BootstrapBlazor/Services/EyeDropperService.cs
similarity index 60%
rename from src/BootstrapBlazor/Components/EyeDropper/EyeDropperService.cs
rename to src/BootstrapBlazor/Services/EyeDropperService.cs
index 4953a7b8402..a6ff6dc59ef 100644
--- a/src/BootstrapBlazor/Components/EyeDropper/EyeDropperService.cs
+++ b/src/BootstrapBlazor/Services/EyeDropperService.cs
@@ -8,16 +8,18 @@ namespace BootstrapBlazor.Components;
 /// <summary>
 /// EyeDropper 服务用于屏幕吸色
 /// </summary>
-public class EyeDropperService : BootstrapServiceBase<EyeDropperOption>
+public class EyeDropperService(IJSRuntime jSRuntime)
 {
+    [NotNull]
+    private JSModule? _module = null;
+
     /// <summary>
     /// 全屏方法，已经全屏时再次调用后退出全屏
     /// </summary>
     /// <returns></returns>
-    public async Task<string?> PickAsync()
+    public async Task<string?> PickAsync(CancellationToken token = default)
     {
-        var op = new EyeDropperOption();
-        await Invoke(op);
-        return op.Value;
+        _module ??= await jSRuntime.LoadModule("./_content/BootstrapBlazor/modules/eye-dropper.js");
+        return await _module.InvokeAsync<string?>("open", token);
     }
 }
diff --git a/src/BootstrapBlazor/wwwroot/modules/eye-dropper.js b/src/BootstrapBlazor/wwwroot/modules/eye-dropper.js
index e0d0d13b580..11ba3fe3957 100644
--- a/src/BootstrapBlazor/wwwroot/modules/eye-dropper.js
+++ b/src/BootstrapBlazor/wwwroot/modules/eye-dropper.js
@@ -1,7 +1,7 @@
 export async function open() {
     if (!window.EyeDropper) {
         console.error("Your browser does not support the EyeDropper API")
-        return
+        return null;
     }
 
     const eyeDropper = new EyeDropper();
diff --git a/test/UnitTest/Services/EyeDropperTest.cs b/test/UnitTest/Services/EyeDropperServiceTest.cs
similarity index 70%
rename from test/UnitTest/Services/EyeDropperTest.cs
rename to test/UnitTest/Services/EyeDropperServiceTest.cs
index 4006f76239c..6348cff3876 100644
--- a/test/UnitTest/Services/EyeDropperTest.cs
+++ b/test/UnitTest/Services/EyeDropperServiceTest.cs
@@ -5,15 +5,14 @@
 
 namespace UnitTest.Services;
 
-public class EyeDropperTest : BootstrapBlazorTestBase
+public class EyeDropperServiceTest : BootstrapBlazorTestBase
 {
     [Fact]
     public async Task EyeDropperService_Ok()
     {
-        Context.JSInterop.Setup<string?>("open").SetResult("Ok");
+        Context.JSInterop.Setup<string?>("open").SetResult("#FFFFFF");
         var service = Context.Services.GetRequiredService<EyeDropperService>();
-        var cut = Context.RenderComponent<EyeDropper>();
         var expected = await service.PickAsync();
-        Assert.Equal("Ok", expected);
+        Assert.Equal("#FFFFFF", expected);
     }
 }