diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts
index fda81fb85f07..d98ca8a6521d 100644
--- a/packages/eui-theme-borealis/src/variables/_components.ts
+++ b/packages/eui-theme-borealis/src/variables/_components.ts
@@ -107,6 +107,11 @@ const component_colors: _EuiThemeComponentColors = {
   listGroupItemBackgroundPrimaryHover:
     background_colors.backgroundBaseInteractiveHover,
 
+  loadingSpinnerBorder:
+    border_colors.borderBasePlain,
+  loadingSpinnerHighlight:
+    border_colors.borderStrongPrimary,
+
   loadingChartMonoBackground0: SEMANTIC_COLORS.shade20,
   loadingChartMonoBackground1: SEMANTIC_COLORS.shade30,
   loadingChartMonoBackground2: SEMANTIC_COLORS.shade40,
@@ -242,10 +247,15 @@ export const components: _EuiThemeComponents = {
     listGroupItemBackgroundPrimaryHover:
       dark_background_colors.backgroundBaseInteractiveHover,
 
-    loadingChartMonoBackground0: SEMANTIC_COLORS.shade95,
-    loadingChartMonoBackground1: SEMANTIC_COLORS.shade105,
-    loadingChartMonoBackground2: SEMANTIC_COLORS.shade115,
-    loadingChartMonoBackground3: SEMANTIC_COLORS.shade125,
+    loadingSpinnerBorder: 
+      dark_border_colors.borderBasePlain,
+    loadingSpinnerHighlight: 
+      dark_border_colors.borderStrongPrimary,
+    
+    loadingChartMonoBackground0: SEMANTIC_COLORS.shade110,
+    loadingChartMonoBackground1: SEMANTIC_COLORS.shade100,
+    loadingChartMonoBackground2: SEMANTIC_COLORS.shade90,
+    loadingChartMonoBackground3: SEMANTIC_COLORS.shade80,
 
     markBackground: dark_background_colors.backgroundLightPrimary,
 
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 cb559ceba441..b067c0a12131 100644
--- a/packages/eui-theme-common/src/global_styling/variables/components.ts
+++ b/packages/eui-theme-common/src/global_styling/variables/components.ts
@@ -78,6 +78,9 @@ export type _EuiThemeComponentColors = {
   listGroupItemBackgroundHover: ColorModeSwitch;
   listGroupItemBackgroundPrimaryHover: ColorModeSwitch;
 
+  loadingSpinnerBorder: ColorModeSwitch;
+  loadingSpinnerHighlight: ColorModeSwitch;
+
   loadingChartMonoBackground0: ColorModeSwitch;
   loadingChartMonoBackground1: ColorModeSwitch;
   loadingChartMonoBackground2: ColorModeSwitch;
diff --git a/packages/eui/src/components/loading/loading_spinner.styles.ts b/packages/eui/src/components/loading/loading_spinner.styles.ts
index 8133e12ed761..68806273b7fb 100644
--- a/packages/eui/src/components/loading/loading_spinner.styles.ts
+++ b/packages/eui/src/components/loading/loading_spinner.styles.ts
@@ -44,8 +44,8 @@ export const euiSpinnerBorderColorsCSS = (
   colors: EuiLoadingSpinnerColor = {}
 ): string => {
   const {
-    border = euiTheme.colors.lightShade,
-    highlight = euiTheme.colors.primary,
+    border = euiTheme.components.loadingSpinnerBorder,
+    highlight = euiTheme.components.loadingSpinnerHighlight,
   } = colors;
   return `${highlight} ${border} ${border} ${border}`;
 };
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 023ad80ee916..64a86d521290 100644
--- a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts
+++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts
@@ -236,6 +236,12 @@ const component_colors: _EuiThemeComponentColors = {
     ['colors.primary']
   ),
 
+  loadingSpinnerBorder: computed(
+    ([lightShade]) => lightShade,
+    ['colors.lightShade']
+  ),
+  loadingSpinnerHighlight: computed(([primary]) => primary, ['colors.primary']),
+
   loadingChartMonoBackground0: computed(
     ([lightShade]) => lightShade,
     ['colors.lightShade']