diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/content.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/content.tsx
index 53d2efe883397..5da0f5b8f5fc8 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/content.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/content.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { useEuiBackgroundColor } from '@elastic/eui';
+import { useEuiTheme } from '@elastic/eui';
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
 import { css } from '@emotion/react';
@@ -29,6 +29,7 @@ export interface PanelContentProps {
  * Displays the content of investigation and insights tabs (visualize is hidden for 8.9).
  */
 export const PanelContent: FC<PanelContentProps> = ({ selectedTabId, tabs }) => {
+  const { euiTheme } = useEuiTheme();
   const selectedTabContent = useMemo(() => {
     return tabs.find((tab) => tab.id === selectedTabId)?.content;
   }, [selectedTabId, tabs]);
@@ -36,7 +37,7 @@ export const PanelContent: FC<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/document_details/left/header.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/header.tsx
index 2b61a97577e06..1e8f88cb68964 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/header.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/header.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiTab, EuiTabs, useEuiBackgroundColor } from '@elastic/eui';
+import { EuiTab, EuiTabs, useEuiTheme } from '@elastic/eui';
 import type { FC } from 'react';
 import React, { memo } from 'react';
 import { css } from '@emotion/react';
@@ -38,6 +38,7 @@ export interface PanelHeaderProps {
  */
 export const PanelHeader: FC<PanelHeaderProps> = memo(
   ({ selectedTabId, setSelectedTabId, tabs }) => {
+    const { euiTheme } = useEuiTheme();
     const { getFieldsData } = useDocumentDetailsContext();
     const isEventKindSignal = getField(getFieldsData('event.kind')) === EventKind.signal;
 
@@ -56,7 +57,7 @@ export const PanelHeader: FC<PanelHeaderProps> = memo(
     return (
       <FlyoutHeader
         css={css`
-          background-color: ${useEuiBackgroundColor('subdued')};
+          background-color: ${euiTheme.colors.backgroundBaseSubdued};
           padding-bottom: 0 !important;
           border-block-end: none !important;
         `}
diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts
index ca3e3e765b977..02017dccf1990 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts
+++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts
@@ -5,14 +5,14 @@
  * 2.0.
  */
 
-import { COLOR_MODES_STANDARD, useEuiBackgroundColor, useEuiTheme } from '@elastic/eui';
+import { COLOR_MODES_STANDARD, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/css';
 
 export const HEIGHT_ANIMATION_DURATION = 250;
 
 export const useCardPanelStyles = () => {
   const { euiTheme, colorMode } = useEuiTheme();
-  const successBackgroundColor = useEuiBackgroundColor('success');
+  const successBackgroundColor = euiTheme.colors.backgroundBaseSuccess;
   const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;
   const darkModeStyles = useDarkPanelStyles(isDarkMode);
 
@@ -31,7 +31,7 @@ export const useCardPanelStyles = () => {
     }
     .onboardingCardHeaderCompleteBadge {
       background-color: ${successBackgroundColor};
-      color: ${euiTheme.colors.successText};
+      color: ${euiTheme.colors.textSuccess};
     }
     .onboardingCardContentWrapper {
       display: grid;