diff --git a/x-pack/platform/plugins/private/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap b/x-pack/platform/plugins/private/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap
index 096b56da2fe6f..b59d087d0818b 100644
--- a/x-pack/platform/plugins/private/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap
+++ b/x-pack/platform/plugins/private/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap
@@ -178,7 +178,7 @@ exports[`extend index management ilm summary extension should render a phase def
         >
           <span
             class="euiBadge emotion-euiBadge"
-            style="--euiBadgeBackgroundColor: #e7664c; --euiBadgeTextColor: #000000;"
+            style="--euiBadgeBackgroundColor: #E7664C; --euiBadgeTextColor: #000000;"
             title="Hot"
           >
             <span
@@ -348,7 +348,7 @@ exports[`extend index management ilm summary extension should render a step info
         >
           <span
             class="euiBadge emotion-euiBadge"
-            style="--euiBadgeBackgroundColor: #e7664c; --euiBadgeTextColor: #000000;"
+            style="--euiBadgeBackgroundColor: #E7664C; --euiBadgeTextColor: #000000;"
             title="Hot"
           >
             <span
@@ -514,7 +514,7 @@ exports[`extend index management ilm summary extension should render an error pa
         >
           <span
             class="euiBadge emotion-euiBadge"
-            style="--euiBadgeBackgroundColor: #e7664c; --euiBadgeTextColor: #000000;"
+            style="--euiBadgeBackgroundColor: #E7664C; --euiBadgeTextColor: #000000;"
             title="Hot"
           >
             <span
diff --git a/x-pack/platform/plugins/private/index_lifecycle_management/__jest__/__snapshots__/policy_flyout.test.tsx.snap b/x-pack/platform/plugins/private/index_lifecycle_management/__jest__/__snapshots__/policy_flyout.test.tsx.snap
index 91a77cb2096f2..35b05292178e3 100644
--- a/x-pack/platform/plugins/private/index_lifecycle_management/__jest__/__snapshots__/policy_flyout.test.tsx.snap
+++ b/x-pack/platform/plugins/private/index_lifecycle_management/__jest__/__snapshots__/policy_flyout.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`View policy flyout shows all phases 1`] = `
                       data-test-subj="ilmTimelinePhase-hot"
                     >
                       <div
-                        class="ilmTimeline__colorBar ilmTimeline__hotPhase__colorBar"
+                        class="ilmTimeline__colorBar  css-nkokfp"
                       />
                       <div
                         class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-center-row"
@@ -88,7 +88,7 @@ exports[`View policy flyout shows all phases 1`] = `
                       data-test-subj="ilmTimelinePhase-warm"
                     >
                       <div
-                        class="ilmTimeline__colorBar ilmTimeline__warmPhase__colorBar"
+                        class="ilmTimeline__colorBar css-1gruzq0"
                       />
                       <div
                         class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-center-row"
@@ -114,7 +114,7 @@ exports[`View policy flyout shows all phases 1`] = `
                       data-test-subj="ilmTimelinePhase-cold"
                     >
                       <div
-                        class="ilmTimeline__colorBar ilmTimeline__coldPhase__colorBar"
+                        class="ilmTimeline__colorBar css-33s0i"
                       />
                       <div
                         class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-center-row"
@@ -140,7 +140,7 @@ exports[`View policy flyout shows all phases 1`] = `
                       data-test-subj="ilmTimelinePhase-frozen"
                     >
                       <div
-                        class="ilmTimeline__colorBar ilmTimeline__frozenPhase__colorBar"
+                        class="ilmTimeline__colorBar css-x0nb1a"
                       />
                       <div
                         class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-center-row"
diff --git a/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.scss b/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.scss
index 8519855aeb68f..5389d83aa3253 100644
--- a/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.scss
+++ b/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.scss
@@ -6,31 +6,14 @@
   align-items: center;
   border-radius: 50%;
   background-color: $euiColorLightestShade;
+
   &--disabled {
     width: $euiSize;
     height: $euiSize;
     margin: $euiSizeS;
   }
+
   &--delete {
     background-color: $euiColorLightShade;
   }
-  &__inner--hot {
-    fill: $euiColorVis9_behindText;
-  }
-  &__inner--warm {
-    fill: $euiColorVis5_behindText;
-  }
-  &__inner--cold {
-    fill: $euiColorVis1_behindText;
-  }
-  &__inner--frozen {
-    fill: $euiColorVis4_behindText;
-  }
-  &__inner--delete {
-    fill: $euiColorDarkShade;
-  }
-
-  &__inner--disabled {
-    fill: $euiColorMediumShade;
-  }
 }
diff --git a/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.tsx b/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.tsx
index 8c0a0bcca1d76..7d51b4b07831d 100644
--- a/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.tsx
+++ b/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.tsx
@@ -6,7 +6,9 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import { EuiIcon } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { euiThemeVars } from '@kbn/ui-theme';
+import { EuiIcon, useEuiTheme } from '@elastic/eui';
 import { Phases } from '../../../../../../common/types';
 import './phase_icon.scss';
 interface Props {
@@ -14,13 +16,27 @@ interface Props {
   phase: string & keyof Phases;
 }
 export const PhaseIcon: FunctionComponent<Props> = ({ enabled, phase }) => {
+  const { euiTheme } = useEuiTheme();
+
+  const isBorealis = euiTheme.themeName === 'EUI_THEME_BOREALIS';
+
+  const phaseIconColors = {
+    hot: isBorealis ? euiTheme.colors.vis.euiColorVis6 : euiThemeVars.euiColorVis9_behindText,
+    warm: isBorealis ? euiTheme.colors.vis.euiColorVis9 : euiThemeVars.euiColorVis5_behindText,
+    cold: isBorealis ? euiTheme.colors.vis.euiColorVis2 : euiThemeVars.euiColorVis1_behindText,
+    frozen: euiTheme.colors.vis.euiColorVis4,
+    delete: euiTheme.colors.darkShade,
+  };
+
   return (
     <div
       className={`ilmPhaseIcon ilmPhaseIcon--${phase} ${enabled ? '' : 'ilmPhaseIcon--disabled'}`}
     >
       {enabled ? (
         <EuiIcon
-          className={`ilmPhaseIcon__inner--${phase}`}
+          css={css`
+            fill: ${phaseIconColors[phase]};
+          `}
           type={phase === 'delete' ? 'trash' : 'checkInCircleFilled'}
           size={phase === 'delete' ? 'm' : 'l'}
         />
diff --git a/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.scss b/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.scss
index a69f244a25aea..7fd59bebea9e6 100644
--- a/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.scss
+++ b/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.scss
@@ -60,33 +60,17 @@ $ilmTimelineBarHeight: $euiSizeS;
 
   &__hotPhase {
     width: var(--ilm-timeline-hot-phase-width);
-
-    &__colorBar {
-      background-color: $euiColorVis9;
-    }
   }
 
   &__warmPhase {
     width: var(--ilm-timeline-warm-phase-width);
-
-    &__colorBar {
-      background-color: $euiColorVis5;
-    }
   }
 
   &__coldPhase {
     width: var(--ilm-timeline-cold-phase-width);
-
-    &__colorBar {
-      background-color: $euiColorVis1;
-    }
   }
 
   &__frozenPhase {
     width: var(--ilm-timeline-frozen-phase-width);
-
-    &__colorBar {
-      background-color: $euiColorVis4;
-    }
   }
 }
diff --git a/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.tsx b/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.tsx
index b2ee9c2520831..8cdfdf5bc9bf3 100644
--- a/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.tsx
+++ b/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.tsx
@@ -5,11 +5,21 @@
  * 2.0.
  */
 
+/** @jsx jsx */
+// Needed for for testing out the css prop feature. See: https://emotion.sh/docs/css-prop#jsx-pragma
+import { css, jsx } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
 import React, { FunctionComponent, memo } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiText, EuiIconTip } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+  EuiText,
+  EuiIconTip,
+  useEuiTheme,
+} from '@elastic/eui';
 
 import { useKibana } from '../../../../../shared_imports';
 
@@ -135,6 +145,17 @@ export const Timeline: FunctionComponent<Props> = memo(
         : undefined,
     };
 
+    const { euiTheme } = useEuiTheme();
+
+    const isBorealis = euiTheme.themeName === 'EUI_THEME_BOREALIS';
+
+    const timelineIconColors = {
+      hot: isBorealis ? euiTheme.colors.vis.euiColorVis6 : euiTheme.colors.vis.euiColorVis9,
+      warm: isBorealis ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.vis.euiColorVis5,
+      cold: isBorealis ? euiTheme.colors.vis.euiColorVis2 : euiTheme.colors.vis.euiColorVis1,
+      frozen: euiTheme.colors.vis.euiColorVis4,
+    };
+
     const phaseAgeInMilliseconds = calculateRelativeFromAbsoluteMilliseconds(absoluteTimings);
 
     const widths = calculateWidths(phaseAgeInMilliseconds);
@@ -188,7 +209,12 @@ export const Timeline: FunctionComponent<Props> = memo(
                     data-test-subj="ilmTimelinePhase-hot"
                     className="ilmTimeline__phasesContainer__phase ilmTimeline__hotPhase"
                   >
-                    <div className="ilmTimeline__colorBar ilmTimeline__hotPhase__colorBar" />
+                    <div
+                      className={`ilmTimeline__colorBar `}
+                      css={css`
+                        background-color: ${timelineIconColors.hot};
+                      `}
+                    />
                     <TimelinePhaseText
                       phaseName={i18nTexts.hotPhase}
                       durationInPhase={getDurationInPhaseContent('hot')}
@@ -199,7 +225,12 @@ export const Timeline: FunctionComponent<Props> = memo(
                       data-test-subj="ilmTimelinePhase-warm"
                       className="ilmTimeline__phasesContainer__phase ilmTimeline__warmPhase"
                     >
-                      <div className="ilmTimeline__colorBar ilmTimeline__warmPhase__colorBar" />
+                      <div
+                        className={`ilmTimeline__colorBar`}
+                        css={css`
+                          background-color: ${timelineIconColors.warm};
+                        `}
+                      />
                       <TimelinePhaseText
                         phaseName={i18nTexts.warmPhase}
                         durationInPhase={getDurationInPhaseContent('warm')}
@@ -211,7 +242,12 @@ export const Timeline: FunctionComponent<Props> = memo(
                       data-test-subj="ilmTimelinePhase-cold"
                       className="ilmTimeline__phasesContainer__phase ilmTimeline__coldPhase"
                     >
-                      <div className="ilmTimeline__colorBar ilmTimeline__coldPhase__colorBar" />
+                      <div
+                        className={`ilmTimeline__colorBar`}
+                        css={css`
+                          background-color: ${timelineIconColors.cold};
+                        `}
+                      />
                       <TimelinePhaseText
                         phaseName={i18nTexts.coldPhase}
                         durationInPhase={getDurationInPhaseContent('cold')}
@@ -223,7 +259,12 @@ export const Timeline: FunctionComponent<Props> = memo(
                       data-test-subj="ilmTimelinePhase-frozen"
                       className="ilmTimeline__phasesContainer__phase ilmTimeline__frozenPhase"
                     >
-                      <div className="ilmTimeline__colorBar ilmTimeline__frozenPhase__colorBar" />
+                      <div
+                        className="ilmTimeline__colorBar"
+                        css={css`
+                          background-color: ${timelineIconColors.frozen};
+                        `}
+                      />
                       <TimelinePhaseText
                         phaseName={i18nTexts.frozenPhase}
                         durationInPhase={getDurationInPhaseContent('frozen')}
diff --git a/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_indicator.tsx b/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_indicator.tsx
index 6c5fd35dcdcfd..0a586f1abc5d6 100644
--- a/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_indicator.tsx
+++ b/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_indicator.tsx
@@ -7,17 +7,23 @@
 
 import React from 'react';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
+import { useEuiTheme } from '@elastic/eui';
 import type { Phase } from '../../../../../common/types';
 
-const phaseToIndicatorColors = {
-  hot: euiThemeVars.euiColorVis9,
-  warm: euiThemeVars.euiColorVis5,
-  cold: euiThemeVars.euiColorVis1,
-  frozen: euiThemeVars.euiColorVis4,
-  delete: euiThemeVars.euiColorLightShade,
-};
 export const PhaseIndicator = ({ phase }: { phase: Phase }) => {
+  const { euiTheme } = useEuiTheme();
+
+  const isBorealis = euiTheme.themeName === 'EUI_THEME_BOREALIS';
+
+  // Changing the mappings for the phases in Borealis as a mid-term solution. See https://github.com/elastic/kibana/issues/203664#issuecomment-2536593361.
+  const phaseToIndicatorColors = {
+    hot: isBorealis ? euiTheme.colors.vis.euiColorVis6 : euiTheme.colors.vis.euiColorVis9,
+    warm: isBorealis ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.vis.euiColorVis5,
+    cold: isBorealis ? euiTheme.colors.vis.euiColorVis2 : euiTheme.colors.vis.euiColorVis1,
+    frozen: euiTheme.colors.vis.euiColorVis4,
+    delete: euiTheme.colors.lightShade,
+  };
+
   return (
     <div
       css={css`
diff --git a/x-pack/platform/plugins/private/index_lifecycle_management/public/extend_index_management/components/index_lifecycle_summary.tsx b/x-pack/platform/plugins/private/index_lifecycle_management/public/extend_index_management/components/index_lifecycle_summary.tsx
index ac96deaef92e4..ffa642c805378 100644
--- a/x-pack/platform/plugins/private/index_lifecycle_management/public/extend_index_management/components/index_lifecycle_summary.tsx
+++ b/x-pack/platform/plugins/private/index_lifecycle_management/public/extend_index_management/components/index_lifecycle_summary.tsx
@@ -22,38 +22,14 @@ import {
   EuiBadgeProps,
   EuiBadge,
   EuiCode,
+  useEuiTheme,
 } from '@elastic/eui';
-import { euiThemeVars } from '@kbn/ui-theme';
 
 import { ApplicationStart } from '@kbn/core/public';
 import { Index, IndexDetailsTab } from '@kbn/index-management-shared-types';
 import { IlmExplainLifecycleLifecycleExplainManaged } from '@elastic/elasticsearch/lib/api/types';
 import { Phase } from '../../../common/types';
 import { getPolicyEditPath } from '../../application/services/navigation';
-
-const phaseToBadgeMapping: Record<Phase, { color: EuiBadgeProps['color']; label: string }> = {
-  hot: {
-    color: euiThemeVars.euiColorVis9,
-    label: 'Hot',
-  },
-  warm: {
-    color: euiThemeVars.euiColorVis5,
-    label: 'Warm',
-  },
-  cold: {
-    color: euiThemeVars.euiColorVis1,
-    label: 'Cold',
-  },
-  frozen: {
-    color: euiThemeVars.euiColorVis4,
-    label: 'Frozen',
-  },
-  delete: {
-    color: 'default',
-    label: 'Delete',
-  },
-};
-
 interface Props {
   index: Index;
   getUrlForApp: ApplicationStart['getUrlForApp'];
@@ -64,6 +40,34 @@ export const IndexLifecycleSummary: FunctionComponent<Props> = ({ index, getUrlF
   // only ILM managed indices render the ILM tab
   const ilm = ilmData as IlmExplainLifecycleLifecycleExplainManaged;
 
+  const { euiTheme } = useEuiTheme();
+
+  const isBorealis = euiTheme.themeName === 'EUI_THEME_BOREALIS';
+
+  // Changing the mappings for the phases in Borealis as a mid-term solution. See https://github.com/elastic/kibana/issues/203664#issuecomment-2536593361.
+  const phaseToBadgeMapping: Record<Phase, { color: EuiBadgeProps['color']; label: string }> = {
+    hot: {
+      color: isBorealis ? euiTheme.colors.vis.euiColorVis6 : euiTheme.colors.vis.euiColorVis9,
+      label: 'Hot',
+    },
+    warm: {
+      color: isBorealis ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.vis.euiColorVis5,
+      label: 'Warm',
+    },
+    cold: {
+      color: isBorealis ? euiTheme.colors.vis.euiColorVis2 : euiTheme.colors.vis.euiColorVis1,
+      label: 'Cold',
+    },
+    frozen: {
+      color: euiTheme.colors.vis.euiColorVis4,
+      label: 'Frozen',
+    },
+    delete: {
+      color: 'default',
+      label: 'Delete',
+    },
+  };
+
   // if ilm.phase is an unexpected value, then display a default badge
   const phaseBadgeConfig = phaseToBadgeMapping[ilm.phase as Phase] ?? {
     color: 'default',
diff --git a/x-pack/platform/plugins/private/index_lifecycle_management/tsconfig.json b/x-pack/platform/plugins/private/index_lifecycle_management/tsconfig.json
index 5f061478f6a5d..34f3e7a95d191 100644
--- a/x-pack/platform/plugins/private/index_lifecycle_management/tsconfig.json
+++ b/x-pack/platform/plugins/private/index_lifecycle_management/tsconfig.json
@@ -35,13 +35,13 @@
     "@kbn/core-http-browser",
     "@kbn/config-schema",
     "@kbn/shared-ux-router",
-    "@kbn/ui-theme",
     "@kbn/shared-ux-link-redirect-app",
     "@kbn/index-management-shared-types",
     "@kbn/react-kibana-context-render",
     "@kbn/unsaved-changes-prompt",
     "@kbn/shared-ux-table-persist",
     "@kbn/index-lifecycle-management-common-shared",
+    "@kbn/ui-theme",
   ],
   "exclude": [
     "target/**/*",