diff --git a/packages/theme/src/theme-engine/utils.ts b/packages/theme/src/theme-engine/utils.ts
index 2256079ca..0d25d2ef8 100644
--- a/packages/theme/src/theme-engine/utils.ts
+++ b/packages/theme/src/theme-engine/utils.ts
@@ -40,7 +40,9 @@ export function getPreviewColors(theme: ThemeDefinition): PreviewColors {
 
   return {
     navigationMenu: {
-      shade: navigationMenu?.primary?.shade || primary.shade,
+      shade: deriveShadeColor(
+        tc(navigationMenu?.primary?.accent || primary.accent)
+      ),
       accent: navigationMenu?.primary?.accent || primary.accent,
       background: navigationMenu?.primary?.background || primary.background,
       icon: navigationMenu?.primary?.icon || primary.icon