diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/shared/components/left_panel/left_panel_content.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/shared/components/left_panel/left_panel_content.tsx
index 5a66a5b305611..33806a604bc11 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/shared/components/left_panel/left_panel_content.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/shared/components/left_panel/left_panel_content.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { useEuiBackgroundColor } from '@elastic/eui';
+import { useEuiTheme } from '@elastic/eui';
 import type { VFC } from 'react';
 import React, { useMemo } from 'react';
 import { css } from '@emotion/react';
@@ -22,6 +22,7 @@ export interface PanelContentProps {
  * Appears after the user clicks on the expand details button in the right section.
  */
 export const LeftPanelContent: VFC<PanelContentProps> = ({ selectedTabId, tabs }) => {
+  const { euiTheme } = useEuiTheme();
   const selectedTabContent = useMemo(() => {
     return tabs.find((tab) => tab.id === selectedTabId)?.content;
   }, [selectedTabId, tabs]);
@@ -29,7 +30,7 @@ export const LeftPanelContent: VFC<PanelContentProps> = ({ selectedTabId, tabs }
   return (
     <FlyoutBody
       css={css`
-        background-color: ${useEuiBackgroundColor('subdued')};
+        background-color: ${euiTheme.colors.backgroundBaseSubdued};
       `}
     >
       {selectedTabContent}
diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/shared/components/left_panel/left_panel_header.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/shared/components/left_panel/left_panel_header.tsx
index 2d7fc23115eb7..3c4e1b9da65bc 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/shared/components/left_panel/left_panel_header.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/shared/components/left_panel/left_panel_header.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiTab, EuiTabs, useEuiBackgroundColor } from '@elastic/eui';
+import { EuiTab, EuiTabs, useEuiTheme } from '@elastic/eui';
 import type { ReactElement, VFC } from 'react';
 import React, { memo } from 'react';
 import { css } from '@emotion/react';
@@ -57,6 +57,7 @@ export interface PanelHeaderProps {
  */
 export const LeftPanelHeader: VFC<PanelHeaderProps> = memo(
   ({ selectedTabId, setSelectedTabId, tabs }) => {
+    const { euiTheme } = useEuiTheme();
     const onSelectedTabChanged = (id: EntityDetailsLeftPanelTab) => setSelectedTabId(id);
     const renderTabs = tabs.map((tab, index) => (
       <EuiTab
@@ -72,7 +73,7 @@ export const LeftPanelHeader: VFC<PanelHeaderProps> = memo(
     return (
       <FlyoutHeader
         css={css`
-          background-color: ${useEuiBackgroundColor('subdued')};
+          background-color: ${euiTheme.colors.backgroundBaseSubdued};
           padding-bottom: 0 !important;
           border-block-end: none !important;
         `}