diff --git a/src/renderer/src/hooks/useUserTheme.ts b/src/renderer/src/hooks/useUserTheme.ts
index 03191f5984..177d23a524 100644
--- a/src/renderer/src/hooks/useUserTheme.ts
+++ b/src/renderer/src/hooks/useUserTheme.ts
@@ -13,6 +13,17 @@ export default function useUserTheme() {
     document.body.style.setProperty('--color-primary', colorPrimary.toString())
     // overwrite hero UI primary color.
     document.body.style.setProperty('--primary', colorPrimary.toString())
+    document.body.style.setProperty('--heroui-primary', colorPrimary.toString())
+    document.body.style.setProperty('--heroui-primary-900', colorPrimary.lighten(0.5).toString())
+    document.body.style.setProperty('--heroui-primary-800', colorPrimary.lighten(0.4).toString())
+    document.body.style.setProperty('--heroui-primary-700', colorPrimary.lighten(0.3).toString())
+    document.body.style.setProperty('--heroui-primary-600', colorPrimary.lighten(0.2).toString())
+    document.body.style.setProperty('--heroui-primary-500', colorPrimary.lighten(0.1).toString())
+    document.body.style.setProperty('--heroui-primary-400', colorPrimary.toString())
+    document.body.style.setProperty('--heroui-primary-300', colorPrimary.darken(0.1).toString())
+    document.body.style.setProperty('--heroui-primary-200', colorPrimary.darken(0.2).toString())
+    document.body.style.setProperty('--heroui-primary-100', colorPrimary.darken(0.3).toString())
+    document.body.style.setProperty('--heroui-primary-50', colorPrimary.darken(0.4).toString())
     document.body.style.setProperty('--color-primary-soft', colorPrimary.alpha(0.6).toString())
     document.body.style.setProperty('--color-primary-mute', colorPrimary.alpha(0.3).toString())