diff --git a/ui/package.json b/ui/package.json
index 0ac8d5a23..c9c61d73c 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -13,6 +13,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@ctrl/tinycolor": "^4.1.0",
     "axios": "^0.28.0",
     "cropperjs": "^1.6.2",
     "echarts": "^5.5.0",
diff --git a/ui/src/theme/index.ts b/ui/src/theme/index.ts
index 047e63862..451558c92 100644
--- a/ui/src/theme/index.ts
+++ b/ui/src/theme/index.ts
@@ -5,7 +5,7 @@ import type {
   UpdateInferData,
   UpdateKeyValueData
 } from './type'
-import tinycolor from '@ctrl/tinycolor'
+import { TinyColor } from '@ctrl/tinycolor'
 // 引入默认推断数据
 import inferData from './defaultInferData'
 // 引入默认keyValue数据
@@ -119,7 +119,7 @@ class Theme {
                   l.toString()
                 )
                 return {
-                  [varName]: tinycolor(inferData.value)
+                  [varName]: new TinyColor(inferData.value)
                     .mix(key === 'light' ? this.colorWhite : this.colorBlack, l * 10)
                     .toHexString()
                 }