diff --git a/src/renderer/src/hooks/useUserTheme.ts b/src/renderer/src/hooks/useUserTheme.ts
index acac9b00d5..bd43377be7 100644
--- a/src/renderer/src/hooks/useUserTheme.ts
+++ b/src/renderer/src/hooks/useUserTheme.ts
@@ -14,6 +14,7 @@ export default function useUserTheme() {
     const colorPrimary = Color(theme.colorPrimary)
 
     document.body.style.setProperty('--color-primary', colorPrimary.toString())
+    document.body.style.setProperty('--color-primary-foreground', getForegroundColor(colorPrimary.hex()))
     // overwrite hero UI primary color.
     document.body.style.setProperty('--primary', colorPrimary.toString())
     document.body.style.setProperty('--primary-foreground', getForegroundColor(colorPrimary.hex()))