diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/index.tsx
index dcdb9438018a5eb..ebc2945cc4c8abe 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/index.tsx
@@ -15,13 +15,13 @@ import { Cytoscape } from './Cytoscape';
 const Background = styled('div')`
   background: linear-gradient(
         90deg,
-        ${theme.euiColorLightestShade}
+        ${theme.euiPageBackgroundColor}
           calc(${theme.euiSizeL} - calc(${theme.euiSizeXS} / 2)),
         transparent 1%
       )
       center,
     linear-gradient(
-        ${theme.euiColorLightestShade}
+        ${theme.euiPageBackgroundColor}
           calc(${theme.euiSizeL} - calc(${theme.euiSizeXS} / 2)),
         transparent 1%
       )