diff --git a/x-pack/plugins/observability_solution/apm/common/service_health_status.ts b/x-pack/plugins/observability_solution/apm/common/service_health_status.ts
index 7f5530aa7fa05..ead84b338266d 100644
--- a/x-pack/plugins/observability_solution/apm/common/service_health_status.ts
+++ b/x-pack/plugins/observability_solution/apm/common/service_health_status.ts
@@ -5,8 +5,8 @@
  * 2.0.
  */
 
+import { EuiThemeComputed } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { EuiTheme } from '@kbn/kibana-react-plugin/common';
 import { ML_ANOMALY_SEVERITY } from '@kbn/ml-anomaly-utils/anomaly_severity';
 
 export enum ServiceHealthStatus {
@@ -34,29 +34,35 @@ export function getServiceHealthStatus({ severity }: { severity: ML_ANOMALY_SEVE
   }
 }
 
-export function getServiceHealthStatusColor(theme: EuiTheme, status: ServiceHealthStatus) {
+export function getServiceHealthStatusColor(
+  theme: EuiThemeComputed<{}>,
+  status: ServiceHealthStatus
+) {
   switch (status) {
     case ServiceHealthStatus.healthy:
-      return theme.eui.euiColorVis0;
+      return theme.colors.vis.euiColorVis0;
     case ServiceHealthStatus.warning:
-      return theme.eui.euiColorVis5;
+      return theme.colors.vis.euiColorVis5;
     case ServiceHealthStatus.critical:
-      return theme.eui.euiColorVis9;
+      return theme.colors.vis.euiColorVis9;
     case ServiceHealthStatus.unknown:
-      return theme.eui.euiColorMediumShade;
+      return theme.colors.mediumShade;
   }
 }
 
-export function getServiceHealthStatusBadgeColor(theme: EuiTheme, status: ServiceHealthStatus) {
+export function getServiceHealthStatusBadgeColor(
+  theme: EuiThemeComputed<{}>,
+  status: ServiceHealthStatus
+) {
   switch (status) {
     case ServiceHealthStatus.healthy:
-      return theme.eui.euiColorVis0_behindText;
+      return theme.colors.vis.euiColorVis0;
     case ServiceHealthStatus.warning:
-      return theme.eui.euiColorVis5_behindText;
+      return theme.colors.vis.euiColorVis5;
     case ServiceHealthStatus.critical:
-      return theme.eui.euiColorVis9_behindText;
+      return theme.colors.vis.euiColorVis9;
     case ServiceHealthStatus.unknown:
-      return theme.eui.euiColorMediumShade;
+      return theme.colors.mediumShade;
   }
 }
 
diff --git a/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx
index 8e7cce37b5be4..271a0caac72fc 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx
@@ -20,7 +20,7 @@ import {
   Tooltip,
   niceTimeFormatter,
 } from '@elastic/charts';
-import { EuiSpacer } from '@elastic/eui';
+import { EuiSpacer, useEuiTheme } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import { IUiSettingsClient } from '@kbn/core/public';
 import { TimeUnitChar } from '@kbn/observability-plugin/common';
@@ -28,7 +28,6 @@ import { UI_SETTINGS } from '@kbn/data-plugin/public';
 import moment from 'moment';
 import { i18n } from '@kbn/i18n';
 import { Coordinate } from '../../../../../typings/timeseries';
-import { useTheme } from '../../../../hooks/use_theme';
 import { getTimeZone } from '../../../shared/charts/helper/timezone';
 import { TimeLabelForData, TIME_LABELS, getDomain } from './chart_preview_helper';
 import { ALERT_PREVIEW_BUCKET_SIZE } from '../../utils/helper';
@@ -52,15 +51,15 @@ export function ChartPreview({
   timeUnit = 'm',
   totalGroups,
 }: ChartPreviewProps) {
-  const theme = useTheme();
+  const { euiTheme } = useEuiTheme();
   const thresholdOpacity = 0.3;
   const DEFAULT_DATE_FORMAT = 'Y-MM-DD HH:mm:ss';
 
   const style = {
-    fill: theme.eui.euiColorVis2,
+    fill: euiTheme.colors.vis.euiColorVis2,
     line: {
       strokeWidth: 2,
-      stroke: theme.eui.euiColorVis2,
+      stroke: euiTheme.colors.vis.euiColorVis2,
       opacity: 1,
     },
     opacity: thresholdOpacity,
diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/error_sampler/sample_summary.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/error_sampler/sample_summary.tsx
index c7acbfee7e45e..8aaf275b66cb4 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/error_sampler/sample_summary.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/error_sampler/sample_summary.tsx
@@ -4,17 +4,19 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiText, EuiSpacer, EuiCodeBlock } from '@elastic/eui';
+import { EuiText, EuiSpacer, EuiCodeBlock, useEuiTheme, type EuiThemeComputed } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
 import { APMError } from '../../../../../typings/es_schemas/ui/apm_error';
 import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
 
-const Label = euiStyled.div`
-  margin-bottom: ${({ theme }) => theme.eui.euiSizeXS};
-  font-size: ${({ theme }) => theme.eui.euiFontSizeS};
-  color: ${({ theme }) => theme.eui.euiColorDarkestShade};
+const Label = euiStyled.div<{
+  euiTheme: EuiThemeComputed<{}>;
+}>`
+  margin-bottom: ${({ euiTheme }) => euiTheme.size.xs};
+  font-size: ${({ euiTheme }) => euiTheme.size.s};
+  color: ${({ euiTheme }) => euiTheme.colors.darkestShade};
 `;
 
 interface Props {
@@ -23,6 +25,7 @@ interface Props {
   };
 }
 export function SampleSummary({ error }: Props) {
+  const { euiTheme } = useEuiTheme();
   const logMessage = error.error.log?.message;
   const excMessage = error.error.exception?.[0].message;
   const culprit = error.error.culprit;
@@ -32,7 +35,7 @@ export function SampleSummary({ error }: Props) {
       {logMessage && (
         <>
           <EuiText size="s">
-            <Label>
+            <Label euiTheme={euiTheme}>
               {i18n.translate('xpack.apm.errorGroupDetails.logMessageLabel', {
                 defaultMessage: 'Log message',
               })}
@@ -44,7 +47,7 @@ export function SampleSummary({ error }: Props) {
         </>
       )}
       <EuiText size="s">
-        <Label>
+        <Label euiTheme={euiTheme}>
           {i18n.translate('xpack.apm.errorGroupDetails.exceptionMessageLabel', {
             defaultMessage: 'Exception message',
           })}
@@ -54,7 +57,7 @@ export function SampleSummary({ error }: Props) {
       <EuiCodeBlock isCopyable>{excMessage || NOT_AVAILABLE_LABEL}</EuiCodeBlock>
       <EuiSpacer />
       <EuiText size="s">
-        <Label>
+        <Label euiTheme={euiTheme}>
           {i18n.translate('xpack.apm.errorGroupDetails.culpritLabel', {
             defaultMessage: 'Culprit',
           })}
diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/cytoscape_options.ts b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/cytoscape_options.ts
index af0befbc06165..25fc379a79f53 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/cytoscape_options.ts
+++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/cytoscape_options.ts
@@ -7,7 +7,7 @@
 
 import cytoscape from 'cytoscape';
 import { CSSProperties } from 'react';
-import { EuiTheme } from '@kbn/kibana-react-plugin/common';
+import { type EuiThemeComputed } from '@elastic/eui';
 import { ServiceAnomalyStats } from '../../../../common/anomaly_detection';
 import { SERVICE_NAME, SPAN_DESTINATION_SERVICE_RESOURCE } from '../../../../common/es_fields/apm';
 import {
@@ -26,7 +26,7 @@ function getServiceAnomalyStats(el: cytoscape.NodeSingular) {
 }
 
 function getBorderColorFn(
-  theme: EuiTheme
+  theme: EuiThemeComputed<{}>
 ): cytoscape.Css.MapperFunction<cytoscape.NodeSingular, string> {
   return (el: cytoscape.NodeSingular) => {
     const hasAnomalyDetectionJob = el.data('serviceAnomalyStats') !== undefined;
diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/anomaly_detection.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/anomaly_detection.tsx
index 307887148e3e8..ce4fda48ce942 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/anomaly_detection.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/anomaly_detection.tsx
@@ -5,7 +5,14 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiHealth, EuiIconTip, EuiTitle } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHealth,
+  EuiIconTip,
+  EuiTitle,
+  useEuiTheme,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
@@ -16,7 +23,6 @@ import {
 } from '../../../../../common/service_health_status';
 import { TRANSACTION_REQUEST } from '../../../../../common/transaction_types';
 import { asDuration, asInteger } from '../../../../../common/utils/formatters';
-import { useTheme } from '../../../../hooks/use_theme';
 import { MLSingleMetricLink } from '../../../shared/links/machine_learning_links/mlsingle_metric_link';
 import { popoverWidth } from '../cytoscape_options';
 
@@ -50,7 +56,7 @@ interface Props {
   serviceAnomalyStats: ServiceAnomalyStats | undefined;
 }
 export function AnomalyDetection({ serviceName, serviceAnomalyStats }: Props) {
-  const theme = useTheme();
+  const { euiTheme } = useEuiTheme();
 
   const anomalyScore = serviceAnomalyStats?.anomalyScore;
   const severity = getSeverity(anomalyScore);
@@ -76,7 +82,7 @@ export function AnomalyDetection({ serviceName, serviceAnomalyStats }: Props) {
           <EuiFlexGroup>
             <EuiFlexItem>
               <VerticallyCentered>
-                <EuiHealth color={getServiceHealthStatusColor(theme, healthStatus)} />
+                <EuiHealth color={getServiceHealthStatusColor(euiTheme, healthStatus)} />
                 <SubduedText>{ANOMALY_DETECTION_SCORE_METRIC}</SubduedText>
               </VerticallyCentered>
             </EuiFlexItem>
diff --git a/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/anomaly_detection_setup_link.tsx b/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/anomaly_detection_setup_link.tsx
index 8d7091e17a4ac..1091c4603bcc1 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/anomaly_detection_setup_link.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/anomaly_detection_setup_link.tsx
@@ -34,7 +34,7 @@ export function AnomalyDetectionSetupLink() {
   const { anomalyDetectionSetupState } = useAnomalyDetectionJobsContext();
 
   let tooltipText: string = '';
-  let color: 'warning' | 'text' | 'success' | 'danger' = 'text';
+  let color: 'warning' | 'text' | 'accentSecondary' | 'danger' = 'text';
   let icon: IconType | undefined;
 
   if (anomalyDetectionSetupState === AnomalyDetectionSetupState.Failure) {
@@ -51,7 +51,7 @@ export function AnomalyDetectionSetupLink() {
     tooltipText = getNoJobsMessage(anomalyDetectionSetupState, environment);
     icon = 'machineLearningApp';
   } else if (anomalyDetectionSetupState === AnomalyDetectionSetupState.UpgradeableJobs) {
-    color = 'success';
+    color = 'accentSecondary';
     tooltipText = i18n.translate('xpack.apm.anomalyDetectionSetup.upgradeableJobsText', {
       defaultMessage: 'Updates available for existing anomaly detection jobs.',
     });
diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/helper/get_chart_anomaly_timeseries.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/helper/get_chart_anomaly_timeseries.tsx
index 56b61cb02d8b9..5388cbd5ab364 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/helper/get_chart_anomaly_timeseries.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/helper/get_chart_anomaly_timeseries.tsx
@@ -7,11 +7,11 @@
 
 import { i18n } from '@kbn/i18n';
 import { rgba } from 'polished';
-import { EuiTheme } from '@kbn/kibana-react-plugin/common';
 import { getSeverity } from '@kbn/ml-anomaly-utils/get_severity';
 import { ML_ANOMALY_SEVERITY } from '@kbn/ml-anomaly-utils/anomaly_severity';
 import { ML_ANOMALY_THRESHOLD } from '@kbn/ml-anomaly-utils/anomaly_threshold';
 import type { AreaSeriesStyle, RecursivePartial } from '@elastic/charts';
+import type { EuiThemeComputed } from '@elastic/eui';
 import { getSeverityColor } from '../../../../../common/anomaly_detection';
 import { ServiceAnomalyTimeseries } from '../../../../../common/anomaly_detection/service_anomaly_timeseries';
 import { APMChartSpec } from '../../../../../typings/timeseries';
@@ -21,11 +21,11 @@ export const expectedBoundsTitle = i18n.translate('xpack.apm.comparison.expected
 });
 export function getChartAnomalyTimeseries({
   anomalyTimeseries,
-  theme,
+  euiTheme,
   anomalyTimeseriesColor,
 }: {
   anomalyTimeseries?: ServiceAnomalyTimeseries;
-  theme: EuiTheme;
+  euiTheme: EuiThemeComputed<{}>;
   anomalyTimeseriesColor?: string;
 }):
   | {
@@ -48,7 +48,7 @@ export function getChartAnomalyTimeseries({
           opacity: 0,
         },
       },
-      color: anomalyTimeseriesColor ?? rgba(theme.eui.euiColorVis1, 0.5),
+      color: anomalyTimeseriesColor ?? rgba(euiTheme.colors.vis.euiColorVis1, 0.5),
       yAccessors: ['y1'],
       y0Accessors: ['y0'],
       data: anomalyTimeseries.bounds,
diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx
index fec3fc4cfe2dd..72dae6b631071 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx
@@ -19,7 +19,7 @@ import {
   TooltipType,
   Tooltip,
 } from '@elastic/charts';
-import { EuiPanel, EuiTitle } from '@elastic/eui';
+import { EuiPanel, EuiTitle, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
@@ -55,6 +55,7 @@ export function InstancesLatencyDistributionChart({
   const hasData = items.length > 0;
 
   const theme = useTheme();
+  const { euiTheme } = useEuiTheme();
   const chartThemes = useChartThemes();
 
   const maxLatency = Math.max(...items.map((item) => item.latency ?? 0));
@@ -130,7 +131,7 @@ export function InstancesLatencyDistributionChart({
             locale={i18n.getLocale()}
           />
           <BubbleSeries
-            color={theme.eui.euiColorVis0}
+            color={euiTheme.colors.vis.euiColorVis0}
             data={items}
             id={i18n.translate('xpack.apm.instancesLatencyDistributionChartLegend', {
               defaultMessage: 'Instances',
@@ -143,7 +144,7 @@ export function InstancesLatencyDistributionChart({
               point: {
                 strokeWidth: 0,
                 radius: 4,
-                fill: theme.eui.euiColorVis0,
+                fill: euiTheme.colors.vis.euiColorVis0,
               },
             }}
           />
diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/legend.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/legend.tsx
index 131d82f4cb428..dc9fd6c520257 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/legend.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/legend.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
-import { useTheme } from '../../../../hooks/use_theme';
+import { useEuiTheme } from '@elastic/eui';
 
 export enum Shape {
   circle = 'circle',
@@ -68,8 +68,8 @@ export function Legend({
   indicator,
   ...rest
 }: Props) {
-  const theme = useTheme();
-  const indicatorColor = color || theme.eui.euiColorVis1;
+  const { euiTheme } = useEuiTheme();
+  const indicatorColor = color || euiTheme.colors.vis.euiColorVis1;
 
   return (
     <Container
diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeseries_chart.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeseries_chart.tsx
index 7b90aeb3ee03c..e0546762f0a8b 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeseries_chart.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeseries_chart.tsx
@@ -25,7 +25,7 @@ import {
   Tooltip,
   SettingsSpec,
 } from '@elastic/charts';
-import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { ReactElement } from 'react';
 import { useHistory } from 'react-router-dom';
@@ -33,7 +33,6 @@ import { useChartThemes } from '@kbn/observability-shared-plugin/public';
 import { isExpectedBoundsComparison } from '../time_comparison/get_comparison_options';
 
 import { useChartPointerEventContext } from '../../../context/chart_pointer_event/use_chart_pointer_event_context';
-import { useTheme } from '../../../hooks/use_theme';
 import { unit } from '../../../utils/style';
 import { ChartContainer } from './chart_container';
 import {
@@ -75,11 +74,11 @@ export function TimeseriesChart({
 }: TimeseriesChartProps) {
   const history = useHistory();
   const { chartRef, updatePointerEvent } = useChartPointerEventContext();
-  const theme = useTheme();
+  const { euiTheme, colorMode } = useEuiTheme();
   const chartThemes = useChartThemes();
   const anomalyChartTimeseries = getChartAnomalyTimeseries({
     anomalyTimeseries,
-    theme,
+    euiTheme,
     anomalyTimeseriesColor: anomalyTimeseries?.color,
   });
   const isEmpty = isTimeseriesEmpty(timeseries);
@@ -115,12 +114,14 @@ export function TimeseriesChart({
       }
     : undefined;
 
-  const endZoneColor = theme.darkMode ? theme.eui.euiColorLightShade : theme.eui.euiColorDarkShade;
+  const isDarkMode = colorMode === 'DARK';
+
+  const endZoneColor = isDarkMode ? euiTheme.colors.lightShade : euiTheme.colors.darkShade;
   const endZoneRectAnnotationStyle: Partial<RectAnnotationStyle> = {
     stroke: endZoneColor,
     fill: endZoneColor,
     strokeWidth: 0,
-    opacity: theme.darkMode ? 0.6 : 0.2,
+    opacity: isDarkMode ? 0.6 : 0.2,
   };
 
   function getChartType(type: string) {
diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/transaction_coldstart_rate_chart/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/transaction_coldstart_rate_chart/index.tsx
index ffce66c797cb0..701c5eaa12db3 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/transaction_coldstart_rate_chart/index.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/transaction_coldstart_rate_chart/index.tsx
@@ -5,7 +5,14 @@
  * 2.0.
  */
 
-import { EuiPanel, EuiTitle, EuiFlexGroup, EuiFlexItem, EuiIconTip } from '@elastic/eui';
+import {
+  EuiPanel,
+  EuiTitle,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIconTip,
+  useEuiTheme,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { usePreviousPeriodLabel } from '../../../../hooks/use_previous_period_text';
@@ -13,7 +20,6 @@ import { isTimeComparison } from '../../time_comparison/get_comparison_options';
 import { APIReturnType } from '../../../../services/rest/create_call_apm_api';
 import { asPercent } from '../../../../../common/utils/formatters';
 import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
-import { useTheme } from '../../../../hooks/use_theme';
 import { TimeseriesChartWithContext } from '../timeseries_chart_with_context';
 import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
 import { getComparisonChartTheme } from '../../time_comparison/get_comparison_chart_theme';
@@ -57,7 +63,7 @@ export function TransactionColdstartRateChart({
   comparisonEnabled,
   offset,
 }: Props) {
-  const theme = useTheme();
+  const { euiTheme } = useEuiTheme();
 
   const {
     query: { rangeFrom, rangeTo },
@@ -117,7 +123,7 @@ export function TransactionColdstartRateChart({
     {
       data: data?.currentPeriod?.transactionColdstartRate ?? [],
       type: 'linemark',
-      color: theme.eui.euiColorVis5,
+      color: euiTheme.colors.vis.euiColorVis5,
       title: i18n.translate('xpack.apm.coldstartRate.chart.coldstartRate', {
         defaultMessage: 'Cold start rate (avg.)',
       }),
@@ -127,7 +133,7 @@ export function TransactionColdstartRateChart({
           {
             data: data?.previousPeriod?.transactionColdstartRate ?? [],
             type: 'area',
-            color: theme.eui.euiColorMediumShade,
+            color: euiTheme.colors.mediumShade,
             title: previousPeriodLabel,
           },
         ]
diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/kuery_bar/typeahead/suggestion.js b/x-pack/plugins/observability_solution/apm/public/components/shared/kuery_bar/typeahead/suggestion.js
index 841b74a37a409..89850dc273a9b 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/shared/kuery_bar/typeahead/suggestion.js
+++ b/x-pack/plugins/observability_solution/apm/public/components/shared/kuery_bar/typeahead/suggestion.js
@@ -8,46 +8,44 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
-import { EuiIcon } from '@elastic/eui';
+import { EuiIcon, useEuiTheme } from '@elastic/eui';
 import { unit } from '../../../../utils/style';
-import { tint } from 'polished';
+import { transparentize } from 'polished';
 
-function getIconColor(type, theme) {
+function getIconColor(type, euiTheme) {
   switch (type) {
     case 'field':
-      return theme.eui.euiColorVis7;
+      return euiTheme.colors.vis.euiColorVis7;
     case 'value':
-      return theme.eui.euiColorVis0;
+      return euiTheme.colors.vis.euiColorVis0;
     case 'operator':
-      return theme.eui.euiColorVis1;
+      return euiTheme.colors.vis.euiColorVis1;
     case 'conjunction':
-      return theme.eui.euiColorVis3;
+      return euiTheme.colors.vis.euiColorVis2;
     case 'recentSearch':
-      return theme.eui.euiColorMediumShade;
+      return euiTheme.colors.textSubdued;
   }
 }
 
 const Description = euiStyled.div`
-  color: ${({ theme }) => theme.eui.euiColorDarkShade};
-
   p {
     display: inline;
 
     span {
       font-family: ${({ theme }) => theme.eui.euiCodeFontFamily};
-      color: ${({ theme }) => theme.eui.euiColorFullShade};
       padding: 0 ${({ theme }) => theme.eui.euiSizeXS};
       display: inline-block;
     }
   }
 `;
 
-const ListItem = euiStyled.li`
-  font-size: ${({ theme }) => theme.eui.euiFontSizeXS};
+const SuggestionItemContainer = euiStyled.div`
+  font-size: ${({ theme }) => theme.eui.euiFontSizeS};
   height: ${({ theme }) => theme.eui.euiSizeXL};
   align-items: center;
   display: flex;
-  background: ${({ selected, theme }) => (selected ? theme.eui.euiColorLightestShade : 'initial')};
+  background: ${({ selected, theme }) =>
+    selected ? theme.eui.euiColorLightestShade : 'transparent'};
   cursor: pointer;
   border-radius: ${({ theme }) => theme.eui.euiBorderRadiusSmall};
 
@@ -61,8 +59,8 @@ const ListItem = euiStyled.li`
 
 const Icon = euiStyled.div`
   flex: 0 0 ${({ theme }) => theme.eui.euiSizeXL};
-  background: ${({ type, theme }) => tint(0.9, getIconColor(type, theme))};
-  color: ${({ type, theme }) => getIconColor(type, theme)};
+  background: ${({ type, euiTheme }) => transparentize(0.9, getIconColor(type, euiTheme))};
+  color: ${({ type, euiTheme }) => getIconColor(type, euiTheme)};
   width: 100%;
   height: 100%;
   text-align: center;
@@ -71,7 +69,6 @@ const Icon = euiStyled.div`
 
 const TextValue = euiStyled.div`
   flex: 0 0 ${unit * 16}px;
-  color: ${({ theme }) => theme.eui.euiColorDarkestShade};
   padding: 0 ${({ theme }) => theme.eui.euiSizeS};
 `;
 
@@ -93,19 +90,19 @@ function getEuiIconType(type) {
 }
 
 function Suggestion(props) {
+  const { euiTheme } = useEuiTheme();
   return (
-    <ListItem
-      innerRef={props.innerRef}
+    <SuggestionItemContainer
       selected={props.selected}
       onClick={() => props.onClick(props.suggestion)}
       onMouseEnter={props.onMouseEnter}
     >
-      <Icon type={props.suggestion.type}>
+      <Icon type={props.suggestion.type} euiTheme={euiTheme}>
         <EuiIcon type={getEuiIconType(props.suggestion.type)} />
       </Icon>
       <TextValue>{props.suggestion.text}</TextValue>
       <Description>{props.suggestion.description}</Description>
-    </ListItem>
+    </SuggestionItemContainer>
   );
 }
 
diff --git a/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx b/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx
index f506d0541d9b6..27cf1577d502a 100644
--- a/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx
@@ -119,6 +119,6 @@ const getEuiIconColor = (
       return theme?.colors.vis.euiColorVis2;
     case QuerySuggestionTypes.RecentSearch:
     default:
-      return theme?.colors.warning;
+      return theme?.colors.mediumShade;
   }
 };
diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_ec2_layout.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_ec2_layout.tsx
index 99b0169b74f06..2ebf1274f29d6 100644
--- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_ec2_layout.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_ec2_layout.tsx
@@ -5,18 +5,18 @@
  * 2.0.
  */
 
-import { EuiPanel } from '@elastic/eui';
+import { EuiPanel, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { withTheme } from '@kbn/kibana-react-plugin/common';
 import React from 'react';
-import type { LayoutPropsWithTheme } from '../../types';
+import type { LayoutPropsWithChildren } from '../../types';
 import { ChartSectionVis } from '../chart_section_vis';
 import { MetadataDetails } from '../metadata_details';
 import { Section } from '../section';
 import { SubSection } from '../sub_section';
 
-export const AwsEC2Layout = withTheme(
-  ({ metrics, theme, onChangeRangeTime }: LayoutPropsWithTheme) => (
+export function AwsEC2Layout({ metrics, onChangeRangeTime }: LayoutPropsWithChildren) {
+  const { euiTheme } = useEuiTheme();
+  return (
     <React.Fragment>
       <MetadataDetails
         fields={[
@@ -54,7 +54,7 @@ export const AwsEC2Layout = withTheme(
               type="area"
               formatter="percent"
               seriesOverrides={{
-                total: { color: theme.eui.euiColorVis1 },
+                total: { color: euiTheme.colors.vis.euiColorVis1 },
               }}
             />
           </SubSection>
@@ -73,7 +73,7 @@ export const AwsEC2Layout = withTheme(
               type="area"
               seriesOverrides={{
                 rx: {
-                  color: theme.eui.euiColorVis1,
+                  color: euiTheme.colors.vis.euiColorVis1,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.hostMetricsLayout.networkTrafficSection.networkRxRateSeriesLabel',
                     {
@@ -82,7 +82,7 @@ export const AwsEC2Layout = withTheme(
                   ),
                 },
                 tx: {
-                  color: theme.eui.euiColorVis2,
+                  color: euiTheme.colors.vis.euiColorVis2,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.hostMetricsLayout.networkTrafficSection.networkTxRateSeriesLabel',
                     {
@@ -108,7 +108,7 @@ export const AwsEC2Layout = withTheme(
               type="area"
               seriesOverrides={{
                 write: {
-                  color: theme.eui.euiColorVis2,
+                  color: euiTheme.colors.vis.euiColorVis2,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.ec2MetricsLayout.diskIOBytesSection.writeLabel',
                     {
@@ -117,7 +117,7 @@ export const AwsEC2Layout = withTheme(
                   ),
                 },
                 read: {
-                  color: theme.eui.euiColorVis1,
+                  color: euiTheme.colors.vis.euiColorVis1,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.ec2MetricsLayout.diskIOBytesSection.readLabel',
                     {
@@ -131,5 +131,5 @@ export const AwsEC2Layout = withTheme(
         </Section>
       </EuiPanel>
     </React.Fragment>
-  )
-);
+  );
+}
diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_rds_layout.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_rds_layout.tsx
index 6415a55e7ed45..96df5e8e00b70 100644
--- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_rds_layout.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_rds_layout.tsx
@@ -5,17 +5,17 @@
  * 2.0.
  */
 
-import { EuiPanel } from '@elastic/eui';
+import { EuiPanel, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { withTheme } from '@kbn/kibana-react-plugin/common';
 import React from 'react';
-import type { LayoutPropsWithTheme } from '../../types';
+import type { LayoutPropsWithChildren } from '../../types';
 import { ChartSectionVis } from '../chart_section_vis';
 import { Section } from '../section';
 import { SubSection } from '../sub_section';
 
-export const AwsRDSLayout = withTheme(
-  ({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
+export function AwsRDSLayout({ metrics, onChangeRangeTime }: LayoutPropsWithChildren) {
+  const { euiTheme } = useEuiTheme();
+  return (
     <EuiPanel>
       <Section
         navLabel="AWS RDS"
@@ -42,7 +42,7 @@ export const AwsRDSLayout = withTheme(
             formatter="percent"
             seriesOverrides={{
               cpu: {
-                color: theme.eui.euiColorVis1,
+                color: euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.rdsMetricsLayout.cpuTotal.chartLabel',
                   { defaultMessage: 'Total' }
@@ -65,7 +65,7 @@ export const AwsRDSLayout = withTheme(
             formatter="number"
             seriesOverrides={{
               connections: {
-                color: theme.eui.euiColorVis1,
+                color: euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.rdsMetricsLayout.connections.chartLabel',
                   { defaultMessage: 'Connections' }
@@ -88,7 +88,7 @@ export const AwsRDSLayout = withTheme(
             formatter="number"
             seriesOverrides={{
               queries: {
-                color: theme.eui.euiColorVis1,
+                color: euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.rdsMetricsLayout.queriesExecuted.chartLabel',
                   { defaultMessage: 'Queries' }
@@ -111,14 +111,14 @@ export const AwsRDSLayout = withTheme(
             formatter="number"
             seriesOverrides={{
               active: {
-                color: theme.eui.euiColorVis1,
+                color: euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.rdsMetricsLayout.active.chartLabel',
                   { defaultMessage: 'Active' }
                 ),
               },
               blocked: {
-                color: theme.eui.euiColorVis2,
+                color: euiTheme.colors.vis.euiColorVis2,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.rdsMetricsLayout.blocked.chartLabel',
                   { defaultMessage: 'Blocked' }
@@ -143,35 +143,35 @@ export const AwsRDSLayout = withTheme(
             formatterTemplate={'{{value}} ms'}
             seriesOverrides={{
               read: {
-                color: theme.eui.euiColorVis1,
+                color: euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.rdsMetricsLayout.latency.read.chartLabel',
                   { defaultMessage: 'Read' }
                 ),
               },
               write: {
-                color: theme.eui.euiColorVis2,
+                color: euiTheme.colors.vis.euiColorVis2,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.rdsMetricsLayout.latency.write.chartLabel',
                   { defaultMessage: 'Write' }
                 ),
               },
               insert: {
-                color: theme.eui.euiColorVis0,
+                color: euiTheme.colors.vis.euiColorVis0,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.rdsMetricsLayout.latency.insert.chartLabel',
                   { defaultMessage: 'Insert' }
                 ),
               },
               update: {
-                color: theme.eui.euiColorVis7,
+                color: euiTheme.colors.vis.euiColorVis7,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.rdsMetricsLayout.latency.update.chartLabel',
                   { defaultMessage: 'Update' }
                 ),
               },
               commit: {
-                color: theme.eui.euiColorVis3,
+                color: euiTheme.colors.vis.euiColorVis3,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.rdsMetricsLayout.latency.commit.chartLabel',
                   { defaultMessage: 'Commit' }
@@ -182,5 +182,5 @@ export const AwsRDSLayout = withTheme(
         </SubSection>
       </Section>
     </EuiPanel>
-  )
-);
+  );
+}
diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_s3_layout.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_s3_layout.tsx
index bf3798e6ed77d..e09283c39dafe 100644
--- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_s3_layout.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_s3_layout.tsx
@@ -7,15 +7,15 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { withTheme } from '@kbn/kibana-react-plugin/common';
-import { EuiPanel } from '@elastic/eui';
-import type { LayoutPropsWithTheme } from '../../types';
+import { EuiPanel, useEuiTheme } from '@elastic/eui';
+import type { LayoutPropsWithChildren } from '../../types';
 import { Section } from '../section';
 import { SubSection } from '../sub_section';
 import { ChartSectionVis } from '../chart_section_vis';
 
-export const AwsS3Layout = withTheme(
-  ({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
+export function AwsS3Layout({ metrics, onChangeRangeTime }: LayoutPropsWithChildren) {
+  const { euiTheme } = useEuiTheme();
+  return (
     <EuiPanel>
       <Section
         navLabel="AWS S3"
@@ -42,7 +42,7 @@ export const AwsS3Layout = withTheme(
             formatter="bytes"
             seriesOverrides={{
               bytes: {
-                color: theme.eui.euiColorVis1,
+                color: euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.s3MetricsLayout.bucketSize.chartLabel',
                   { defaultMessage: 'Total Bytes' }
@@ -65,7 +65,7 @@ export const AwsS3Layout = withTheme(
             formatter="abbreviatedNumber"
             seriesOverrides={{
               objects: {
-                color: theme.eui.euiColorVis1,
+                color: euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.s3MetricsLayout.numberOfObjects.chartLabel',
                   { defaultMessage: 'Objects' }
@@ -88,7 +88,7 @@ export const AwsS3Layout = withTheme(
             formatter="abbreviatedNumber"
             seriesOverrides={{
               total: {
-                color: theme.eui.euiColorVis1,
+                color: euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.s3MetricsLayout.totalRequests.chartLabel',
                   { defaultMessage: 'Requests' }
@@ -111,7 +111,7 @@ export const AwsS3Layout = withTheme(
             formatter="bytes"
             seriesOverrides={{
               bytes: {
-                color: theme.eui.euiColorVis1,
+                color: euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.s3MetricsLayout.downloadBytes.chartLabel',
                   { defaultMessage: 'Bytes' }
@@ -134,7 +134,7 @@ export const AwsS3Layout = withTheme(
             formatter="bytes"
             seriesOverrides={{
               bytes: {
-                color: theme.eui.euiColorVis1,
+                color: euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.s3MetricsLayout.uploadBytes.chartLabel',
                   { defaultMessage: 'Bytes' }
@@ -145,5 +145,5 @@ export const AwsS3Layout = withTheme(
         </SubSection>
       </Section>
     </EuiPanel>
-  )
-);
+  );
+}
diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_sqs_layout.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_sqs_layout.tsx
index 6c4ff360bc853..3384f793bb437 100644
--- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_sqs_layout.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_sqs_layout.tsx
@@ -5,17 +5,17 @@
  * 2.0.
  */
 
-import { EuiPanel } from '@elastic/eui';
+import { EuiPanel, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { withTheme } from '@kbn/kibana-react-plugin/common';
 import React from 'react';
-import type { LayoutPropsWithTheme } from '../../types';
+import type { LayoutPropsWithChildren } from '../../types';
 import { ChartSectionVis } from '../chart_section_vis';
 import { Section } from '../section';
 import { SubSection } from '../sub_section';
 
-export const AwsSQSLayout = withTheme(
-  ({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
+export function AwsSQSLayout({ metrics, onChangeRangeTime }: LayoutPropsWithChildren) {
+  const { euiTheme } = useEuiTheme();
+  return (
     <EuiPanel>
       <Section
         navLabel="AWS SQS"
@@ -42,7 +42,7 @@ export const AwsSQSLayout = withTheme(
             formatter="abbreviatedNumber"
             seriesOverrides={{
               visible: {
-                color: theme.eui.euiColorVis1,
+                color: euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesVisible.chartLabel',
                   { defaultMessage: 'Available' }
@@ -65,7 +65,7 @@ export const AwsSQSLayout = withTheme(
             formatter="abbreviatedNumber"
             seriesOverrides={{
               delayed: {
-                color: theme.eui.euiColorVis1,
+                color: euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesDelayed.chartLabel',
                   { defaultMessage: 'Delayed' }
@@ -88,7 +88,7 @@ export const AwsSQSLayout = withTheme(
             formatter="abbreviatedNumber"
             seriesOverrides={{
               sent: {
-                color: theme.eui.euiColorVis1,
+                color: euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesSent.chartLabel',
                   { defaultMessage: 'Added' }
@@ -111,7 +111,7 @@ export const AwsSQSLayout = withTheme(
             formatter="abbreviatedNumber"
             seriesOverrides={{
               sent: {
-                color: theme.eui.euiColorVis1,
+                color: euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.sqsMetricsLayout.messagesEmpty.chartLabel',
                   { defaultMessage: 'Empty' }
@@ -134,7 +134,7 @@ export const AwsSQSLayout = withTheme(
             formatter="abbreviatedNumber"
             seriesOverrides={{
               oldest: {
-                color: theme.eui.euiColorVis1,
+                color: euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.sqsMetricsLayout.oldestMessage.chartLabel',
                   { defaultMessage: 'Age' }
@@ -145,5 +145,5 @@ export const AwsSQSLayout = withTheme(
         </SubSection>
       </Section>
     </EuiPanel>
-  )
-);
+  );
+}
diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/container_layout.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/container_layout.tsx
index b614f38d65ecc..c113e3cbb0772 100644
--- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/container_layout.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/container_layout.tsx
@@ -5,19 +5,19 @@
  * 2.0.
  */
 
-import { EuiPanel } from '@elastic/eui';
+import { EuiPanel, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { withTheme } from '@kbn/kibana-react-plugin/common';
 import React from 'react';
-import type { LayoutPropsWithTheme } from '../../types';
+import type { LayoutPropsWithChildren } from '../../types';
 import { ChartSectionVis } from '../chart_section_vis';
 import { GaugesSectionVis } from '../gauges_section_vis';
 import { MetadataDetails } from '../metadata_details';
 import { Section } from '../section';
 import { SubSection } from '../sub_section';
 
-export const ContainerLayout = withTheme(
-  ({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
+export function ContainerLayout({ metrics, onChangeRangeTime }: LayoutPropsWithChildren) {
+  const { euiTheme } = useEuiTheme();
+  return (
     <React.Fragment>
       <MetadataDetails />
       <EuiPanel>
@@ -47,7 +47,7 @@ export const ContainerLayout = withTheme(
                       defaultMessage: 'CPU Usage',
                     }
                   ),
-                  color: theme.eui.euiColorFullShade,
+                  color: euiTheme.colors.fullShade,
                   formatter: 'percent',
                   gaugeMax: 1,
                 },
@@ -58,7 +58,7 @@ export const ContainerLayout = withTheme(
                       defaultMessage: 'Memory Usage',
                     }
                   ),
-                  color: theme.eui.euiColorFullShade,
+                  color: euiTheme.colors.fullShade,
                   formatter: 'percent',
                   gaugeMax: 1,
                 },
@@ -76,7 +76,7 @@ export const ContainerLayout = withTheme(
                       defaultMessage: 'CPU Usage',
                     }
                   ),
-                  color: theme.eui.euiColorFullShade,
+                  color: euiTheme.colors.fullShade,
                   formatter: 'percent',
                   gaugeMax: 1,
                 },
@@ -87,7 +87,7 @@ export const ContainerLayout = withTheme(
                       defaultMessage: 'Memory Usage',
                     }
                   ),
-                  color: theme.eui.euiColorFullShade,
+                  color: euiTheme.colors.fullShade,
                   formatter: 'percent',
                   gaugeMax: 1,
                 },
@@ -98,7 +98,7 @@ export const ContainerLayout = withTheme(
                       defaultMessage: 'Inbound (RX)',
                     }
                   ),
-                  color: theme.eui.euiColorFullShade,
+                  color: euiTheme.colors.fullShade,
                   formatter: 'bits',
                   formatterTemplate: '{{value}}/s',
                 },
@@ -109,7 +109,7 @@ export const ContainerLayout = withTheme(
                       defaultMessage: 'Outbound (TX)',
                     }
                   ),
-                  color: theme.eui.euiColorFullShade,
+                  color: euiTheme.colors.fullShade,
                   formatter: 'bits',
                   formatterTemplate: '{{value}}/s',
                 },
@@ -130,7 +130,7 @@ export const ContainerLayout = withTheme(
               type="area"
               formatter="percent"
               seriesOverrides={{
-                cpu: { color: theme.eui.euiColorVis1 },
+                cpu: { color: euiTheme.colors.vis.euiColorVis1 },
               }}
             />
           </SubSection>
@@ -148,7 +148,7 @@ export const ContainerLayout = withTheme(
               type="area"
               formatter="percent"
               seriesOverrides={{
-                memory: { color: theme.eui.euiColorVis1 },
+                memory: { color: euiTheme.colors.vis.euiColorVis1 },
               }}
             />
           </SubSection>
@@ -166,7 +166,7 @@ export const ContainerLayout = withTheme(
               type="area"
               formatter="percent"
               seriesOverrides={{
-                cpu: { color: theme.eui.euiColorVis1 },
+                cpu: { color: euiTheme.colors.vis.euiColorVis1 },
               }}
             />
           </SubSection>
@@ -184,7 +184,7 @@ export const ContainerLayout = withTheme(
               type="area"
               formatter="percent"
               seriesOverrides={{
-                memory: { color: theme.eui.euiColorVis1 },
+                memory: { color: euiTheme.colors.vis.euiColorVis1 },
               }}
             />
           </SubSection>
@@ -203,7 +203,7 @@ export const ContainerLayout = withTheme(
               type="area"
               seriesOverrides={{
                 rx: {
-                  color: theme.eui.euiColorVis1,
+                  color: euiTheme.colors.vis.euiColorVis1,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.containerMetricsLayout.networkTrafficSection.networkRxRateSeriesLabel',
                     {
@@ -212,7 +212,7 @@ export const ContainerLayout = withTheme(
                   ),
                 },
                 tx: {
-                  color: theme.eui.euiColorVis2,
+                  color: euiTheme.colors.vis.euiColorVis2,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.containerMetricsLayout.networkTrafficSection.networkTxRateSeriesLabel',
                     {
@@ -238,7 +238,7 @@ export const ContainerLayout = withTheme(
               formatter="number"
               seriesOverrides={{
                 read: {
-                  color: theme.eui.euiColorVis1,
+                  color: euiTheme.colors.vis.euiColorVis1,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoOpsSection.readRateSeriesLabel',
                     {
@@ -247,7 +247,7 @@ export const ContainerLayout = withTheme(
                   ),
                 },
                 write: {
-                  color: theme.eui.euiColorVis2,
+                  color: euiTheme.colors.vis.euiColorVis2,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoOpsSection.writeRateSeriesLabel',
                     {
@@ -273,7 +273,7 @@ export const ContainerLayout = withTheme(
               formatterTemplate="{{value}}/s"
               seriesOverrides={{
                 read: {
-                  color: theme.eui.euiColorVis1,
+                  color: euiTheme.colors.vis.euiColorVis1,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoBytesSection.readRateSeriesLabel',
                     {
@@ -282,7 +282,7 @@ export const ContainerLayout = withTheme(
                   ),
                 },
                 write: {
-                  color: theme.eui.euiColorVis2,
+                  color: euiTheme.colors.vis.euiColorVis2,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoBytesSection.writeRateSeriesLabel',
                     {
@@ -296,5 +296,5 @@ export const ContainerLayout = withTheme(
         </Section>
       </EuiPanel>
     </React.Fragment>
-  )
-);
+  );
+}
diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/nginx_layout_sections.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/nginx_layout_sections.tsx
index d845357d33256..f3df20a108a3b 100644
--- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/nginx_layout_sections.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/nginx_layout_sections.tsx
@@ -7,14 +7,15 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { withTheme } from '@kbn/kibana-react-plugin/common';
-import type { LayoutPropsWithTheme } from '../../types';
+import { useEuiTheme } from '@elastic/eui';
+import type { LayoutPropsWithChildren } from '../../types';
 import { Section } from '../section';
 import { SubSection } from '../sub_section';
 import { ChartSectionVis } from '../chart_section_vis';
 
-export const NginxLayoutSection = withTheme(
-  ({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
+export function NginxLayoutSection({ metrics, onChangeRangeTime }: LayoutPropsWithChildren) {
+  const { euiTheme } = useEuiTheme();
+  return (
     <React.Fragment>
       <Section
         navLabel="Nginx"
@@ -36,10 +37,10 @@ export const NginxLayoutSection = withTheme(
             type="bar"
             formatter="abbreviatedNumber"
             seriesOverrides={{
-              '200s': { color: theme.eui.euiColorVis1 },
-              '300s': { color: theme.eui.euiColorVis5 },
-              '400s': { color: theme.eui.euiColorVis2 },
-              '500s': { color: theme.eui.euiColorVis9 },
+              '200s': { color: euiTheme.colors.vis.euiColorVis1 },
+              '300s': { color: euiTheme.colors.vis.euiColorVis5 },
+              '400s': { color: euiTheme.colors.vis.euiColorVis2 },
+              '500s': { color: euiTheme.colors.vis.euiColorVis9 },
             }}
           />
         </SubSection>
@@ -57,7 +58,7 @@ export const NginxLayoutSection = withTheme(
             formatter="abbreviatedNumber"
             formatterTemplate="{{value}}/s"
             seriesOverrides={{
-              rate: { color: theme.eui.euiColorVis1 },
+              rate: { color: euiTheme.colors.vis.euiColorVis1 },
             }}
           />
         </SubSection>
@@ -75,7 +76,7 @@ export const NginxLayoutSection = withTheme(
             formatter="abbreviatedNumber"
             seriesOverrides={{
               connections: {
-                color: theme.eui.euiColorVis1,
+                color: euiTheme.colors.vis.euiColorVis1,
                 type: 'bar',
               },
             }}
@@ -95,7 +96,7 @@ export const NginxLayoutSection = withTheme(
             formatter="abbreviatedNumber"
             seriesOverrides={{
               reqPerConns: {
-                color: theme.eui.euiColorVis1,
+                color: euiTheme.colors.vis.euiColorVis1,
                 name: i18n.translate(
                   'xpack.infra.metricDetailPage.nginxMetricsLayout.requestsPerConnectionsSection.reqsPerConnSeriesLabel',
                   {
@@ -108,5 +109,5 @@ export const NginxLayoutSection = withTheme(
         </SubSection>
       </Section>
     </React.Fragment>
-  )
-);
+  );
+}
diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/pod_layout.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/pod_layout.tsx
index f35f606db7452..dc634d4f7c34f 100644
--- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/pod_layout.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/pod_layout.tsx
@@ -5,11 +5,10 @@
  * 2.0.
  */
 
-import { EuiPanel } from '@elastic/eui';
+import { EuiPanel, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { withTheme } from '@kbn/kibana-react-plugin/common';
 import React from 'react';
-import type { LayoutPropsWithTheme } from '../../types';
+import type { LayoutPropsWithChildren } from '../../types';
 import { ChartSectionVis } from '../chart_section_vis';
 import { GaugesSectionVis } from '../gauges_section_vis';
 import { MetadataDetails } from '../metadata_details';
@@ -17,8 +16,9 @@ import { Section } from '../section';
 import { SubSection } from '../sub_section';
 import { NginxLayoutSection } from './nginx_layout_sections';
 
-export const PodLayout = withTheme(
-  ({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
+export function PodLayout({ metrics, onChangeRangeTime }: LayoutPropsWithChildren) {
+  const { euiTheme } = useEuiTheme();
+  return (
     <React.Fragment>
       <MetadataDetails />
       <EuiPanel>
@@ -45,7 +45,7 @@ export const PodLayout = withTheme(
                       defaultMessage: 'CPU Usage',
                     }
                   ),
-                  color: theme.eui.euiColorFullShade,
+                  color: euiTheme.colors.fullShade,
                   formatter: 'percent',
                   gaugeMax: 1,
                 },
@@ -56,7 +56,7 @@ export const PodLayout = withTheme(
                       defaultMessage: 'Memory Usage',
                     }
                   ),
-                  color: theme.eui.euiColorFullShade,
+                  color: euiTheme.colors.fullShade,
                   formatter: 'percent',
                   gaugeMax: 1,
                 },
@@ -67,7 +67,7 @@ export const PodLayout = withTheme(
                       defaultMessage: 'Inbound (RX)',
                     }
                   ),
-                  color: theme.eui.euiColorFullShade,
+                  color: euiTheme.colors.fullShade,
                   formatter: 'bits',
                   formatterTemplate: '{{value}}/s',
                 },
@@ -78,7 +78,7 @@ export const PodLayout = withTheme(
                       defaultMessage: 'Outbound (TX)',
                     }
                   ),
-                  color: theme.eui.euiColorFullShade,
+                  color: euiTheme.colors.fullShade,
                   formatter: 'bits',
                   formatterTemplate: '{{value}}/s',
                 },
@@ -98,7 +98,7 @@ export const PodLayout = withTheme(
               formatter="percent"
               type="area"
               seriesOverrides={{
-                cpu: { color: theme.eui.euiColorVis1 },
+                cpu: { color: euiTheme.colors.vis.euiColorVis1 },
               }}
             />
           </SubSection>
@@ -116,7 +116,7 @@ export const PodLayout = withTheme(
               formatter="percent"
               seriesOverrides={{
                 memory: {
-                  color: theme.eui.euiColorVis1,
+                  color: euiTheme.colors.vis.euiColorVis1,
                 },
               }}
             />
@@ -136,7 +136,7 @@ export const PodLayout = withTheme(
               type="area"
               seriesOverrides={{
                 rx: {
-                  color: theme.eui.euiColorVis1,
+                  color: euiTheme.colors.vis.euiColorVis1,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.podMetricsLayout.networkTrafficSection.networkRxRateSeriesLabel',
                     {
@@ -145,7 +145,7 @@ export const PodLayout = withTheme(
                   ),
                 },
                 tx: {
-                  color: theme.eui.euiColorVis2,
+                  color: euiTheme.colors.vis.euiColorVis2,
                   name: i18n.translate(
                     'xpack.infra.metricDetailPage.podMetricsLayout.networkTrafficSection.networkTxRateSeriesLabel',
                     {
@@ -160,5 +160,5 @@ export const PodLayout = withTheme(
         <NginxLayoutSection metrics={metrics} onChangeRangeTime={onChangeRangeTime} />
       </EuiPanel>
     </React.Fragment>
-  )
-);
+  );
+}
diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/types.ts b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/types.ts
index 4d5c5ad7ea861..2e69392c546e1 100644
--- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/types.ts
+++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/types.ts
@@ -7,7 +7,6 @@
 
 import rt from 'io-ts';
 import { PropsWithChildren } from 'react';
-import { EuiTheme } from '@kbn/kibana-react-plugin/common';
 import { InventoryFormatterTypeRT } from '@kbn/metrics-data-access-plugin/common';
 import { MetricsTimeInput } from './hooks/use_metrics_time';
 import { NodeDetailsMetricData } from '../../../../common/http_api/node_details_api';
@@ -19,7 +18,7 @@ export interface LayoutProps {
   stopLiveStreaming?: () => void;
 }
 
-export type LayoutPropsWithTheme = LayoutProps & PropsWithChildren<{ theme: EuiTheme }>;
+export type LayoutPropsWithChildren = LayoutProps & PropsWithChildren;
 
 const ChartTypesRT = rt.keyof({
   area: null,