diff --git a/CHANGELOG.md b/CHANGELOG.md
index a2e96cf1c..422e61e9a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
 - Added `FluentThemeData.selectionColor`, which defaults to the accent color normal shade ([#897](https://github.com/bdlukaa/fluent_ui/issues/897))
 - Flyout reverse transition duration is properly set ([#893](https://github.com/bdlukaa/fluent_ui/issues/893))
 - Remove view padding when app bar is provided ([#884](https://github.com/bdlukaa/fluent_ui/issues/884))
+- Added `NavigationPaneThemeData.popupBackgroundColor`, which defaults to the black color normal shade
 
 ## 4.7.0
 
diff --git a/lib/src/controls/navigation/navigation_view/style.dart b/lib/src/controls/navigation/navigation_view/style.dart
index 2dcf87171..ac78f0978 100644
--- a/lib/src/controls/navigation/navigation_view/style.dart
+++ b/lib/src/controls/navigation/navigation_view/style.dart
@@ -87,6 +87,10 @@ class NavigationPaneThemeData with Diagnosticable {
   /// is used.
   final Color? backgroundColor;
 
+  /// The minimal pane background color. If null, [Colors.black]
+  /// is used.
+  final Color? popupBackgroundColor;
+
   /// The color of the tiles. If null, [ButtonThemeData.uncheckedInputColor]
   /// is used
   final ButtonState<Color?>? tileColor;
@@ -115,6 +119,7 @@ class NavigationPaneThemeData with Diagnosticable {
 
   const NavigationPaneThemeData({
     this.backgroundColor,
+    this.popupBackgroundColor,
     this.tileColor,
     this.highlightColor,
     this.labelPadding,
@@ -201,6 +206,7 @@ class NavigationPaneThemeData with Diagnosticable {
           EdgeInsetsGeometry.lerp(a?.headerPadding, b?.headerPadding, t),
       tileColor: ButtonState.lerp(a?.tileColor, b?.tileColor, t, Color.lerp),
       backgroundColor: Color.lerp(a?.backgroundColor, b?.backgroundColor, t),
+      popupBackgroundColor: Color.lerp(a?.popupBackgroundColor, b?.popupBackgroundColor, t),
       itemHeaderTextStyle:
           TextStyle.lerp(a?.itemHeaderTextStyle, b?.itemHeaderTextStyle, t),
       selectedTextStyle: ButtonState.lerp(
@@ -229,6 +235,7 @@ class NavigationPaneThemeData with Diagnosticable {
       headerPadding: style?.headerPadding ?? headerPadding,
       tileColor: style?.tileColor ?? tileColor,
       backgroundColor: style?.backgroundColor ?? backgroundColor,
+      popupBackgroundColor: style?.popupBackgroundColor ?? popupBackgroundColor,
       itemHeaderTextStyle: style?.itemHeaderTextStyle ?? itemHeaderTextStyle,
       selectedTextStyle: style?.selectedTextStyle ?? selectedTextStyle,
       unselectedTextStyle: style?.unselectedTextStyle ?? unselectedTextStyle,
@@ -249,6 +256,7 @@ class NavigationPaneThemeData with Diagnosticable {
     properties
       ..add(DiagnosticsProperty('tileColor', tileColor))
       ..add(ColorProperty('backgroundColor', backgroundColor))
+      ..add(ColorProperty('popupBackgroundColor', popupBackgroundColor))
       ..add(ColorProperty('highlightColor', highlightColor))
       ..add(
           DiagnosticsProperty<EdgeInsetsGeometry>('labelPadding', labelPadding))
diff --git a/lib/src/controls/navigation/navigation_view/view.dart b/lib/src/controls/navigation/navigation_view/view.dart
index ce9e800dd..2a93d26e4 100644
--- a/lib/src/controls/navigation/navigation_view/view.dart
+++ b/lib/src/controls/navigation/navigation_view/view.dart
@@ -678,7 +678,7 @@ class NavigationViewState extends State<NavigationView> {
                   height: MediaQuery.sizeOf(context).height,
                   child: PaneScrollConfiguration(
                     child: ColoredBox(
-                      color: Colors.black,
+                      color: theme.popupBackgroundColor ?? Colors.black,
                       child: Mica(
                         backgroundColor: overlayBackgroundColor(),
                         child: Container(