diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts
index abffb0657a3..2f9655c9856 100644
--- a/packages/eui-theme-borealis/src/variables/_components.ts
+++ b/packages/eui-theme-borealis/src/variables/_components.ts
@@ -85,6 +85,7 @@ const component_colors: _EuiThemeComponentColors = {
   filterSelectItemBackgroundFocusDisabled:
     background_colors.backgroundBaseDisabled,
 
+  flyoutFooterBackground: background_colors.backgroundBaseHighlighted,
   flyoutCloseButtonInsideBackground: background_colors.backgroundBasePlain,
 
   headerBackground: background_colors.backgroundBasePlain,
@@ -220,6 +221,7 @@ export const components: _EuiThemeComponents = {
     filterSelectItemBackgroundFocusDisabled:
       dark_background_colors.backgroundBaseDisabled,
 
+    flyoutFooterBackground: dark_background_colors.backgroundBaseHighlighted,
     flyoutCloseButtonInsideBackground:
       dark_background_colors.backgroundBasePlain,
 
diff --git a/packages/eui-theme-common/src/global_styling/variables/components.ts b/packages/eui-theme-common/src/global_styling/variables/components.ts
index b0ea359ab5e..b4e66de88a3 100644
--- a/packages/eui-theme-common/src/global_styling/variables/components.ts
+++ b/packages/eui-theme-common/src/global_styling/variables/components.ts
@@ -67,6 +67,7 @@ export type _EuiThemeComponentColors = {
 
   filterSelectItemBackgroundFocusDisabled: ColorModeSwitch;
 
+  flyoutFooterBackground: ColorModeSwitch;
   flyoutCloseButtonInsideBackground: ColorModeSwitch;
 
   keyPadMenuItemBackgroundDisabledSelect: ColorModeSwitch;
diff --git a/packages/eui/src/components/flyout/flyout_footer.styles.ts b/packages/eui/src/components/flyout/flyout_footer.styles.ts
index 8cb5b41ac31..81a07b58fe0 100644
--- a/packages/eui/src/components/flyout/flyout_footer.styles.ts
+++ b/packages/eui/src/components/flyout/flyout_footer.styles.ts
@@ -14,7 +14,7 @@ export const euiFlyoutFooterStyles = (euiThemeContext: UseEuiTheme) => {
 
   return {
     euiFlyoutFooter: css`
-      background-color: ${euiTheme.colors.lightestShade};
+      background-color: ${euiTheme.components.flyoutFooterBackground};
       flex-grow: 0;
     `,
   };
diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts
index 85f6d6979ea..932358d3004 100644
--- a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts
+++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts
@@ -184,6 +184,10 @@ const component_colors: _EuiThemeComponentColors = {
     ['colors.disabled']
   ),
 
+  flyoutFooterBackground: computed(
+    ([lightestShade]) => lightestShade,
+    ['colors.lightestShade']
+  ),
   flyoutCloseButtonInsideBackground: computed(
     ([emptyShade]) => transparentize(emptyShade, 0.9),
     ['colors.emptyShade']