diff --git a/src/renderer/themes/use-app-theme.ts b/src/renderer/themes/use-app-theme.ts
index 10ea0748f..6ff380e83 100644
--- a/src/renderer/themes/use-app-theme.ts
+++ b/src/renderer/themes/use-app-theme.ts
@@ -1,5 +1,6 @@
 import type { MantineThemeOverride } from '@mantine/core';
 
+import { generateColors } from '@mantine/colors-generator';
 import { useMantineColorScheme } from '@mantine/core';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
@@ -177,8 +178,30 @@ export const useAppTheme = (overrideTheme?: AppTheme) => {
         const primaryColor = useThemeAccentColor
             ? themeProperties.colors?.primary || themeProperties.colors?.['state-info'] || accent
             : accent;
-        root.style.setProperty('--theme-colors-primary', primaryColor);
-    }, [accent, selectedTheme, useThemeAccentColor]);
+        const effectivePrimaryShade: MantineThemeOverride['primaryShade'] = useThemePrimaryShade
+            ? themeProperties.mantineOverride?.primaryShade
+            : ({ dark: primaryShade, light: primaryShade } as MantineThemeOverride['primaryShade']);
+        const mode = themeProperties.mode ?? (isDarkTheme ? 'dark' : 'light');
+        const shadeIndex = Math.min(
+            9,
+            Math.max(
+                0,
+                typeof effectivePrimaryShade === 'object'
+                    ? (effectivePrimaryShade?.[mode] ?? 6)
+                    : (effectivePrimaryShade ?? 6),
+            ),
+        );
+        const primaryScale = generateColors(primaryColor);
+        const primaryAtShade = primaryScale[shadeIndex];
+        root.style.setProperty('--theme-colors-primary', primaryAtShade);
+    }, [
+        accent,
+        isDarkTheme,
+        primaryShade,
+        selectedTheme,
+        useThemeAccentColor,
+        useThemePrimaryShade,
+    ]);
 
     useEffect(() => {
         const root = document.documentElement;