diff --git a/src/themes/oui-next/global_styling/variables/_header.scss b/src/themes/oui-next/global_styling/variables/_header.scss
index 065724c403..e5f7abb3dd 100644
--- a/src/themes/oui-next/global_styling/variables/_header.scss
+++ b/src/themes/oui-next/global_styling/variables/_header.scss
@@ -10,8 +10,9 @@
  */
 
 // Themeable colors
-$ouiHeaderBackgroundColor: $ouiColorEmptyShade !default;
-$ouiHeaderDarkBackgroundColor: lightOrDarkTheme(shade($ouiColorDarkestShade, 28%), shade($ouiColorLightestShade, 50%)) !default;
+$ouiHeaderBackgroundColor: $ouiPageBackgroundColor !default;
+// Always use the dark theme value of $ouiPageBackgroundColor for the dark header background
+$ouiHeaderDarkBackgroundColor: #172430 !default;
 $ouiHeaderBorderColor: $ouiBorderColor !default;
 $ouiHeaderBreadcrumbColor: $ouiColorDarkestShade !default;