diff --git a/examples/embeddable_examples/public/react_embeddables/eui_markdown/eui_markdown_react_embeddable.tsx b/examples/embeddable_examples/public/react_embeddables/eui_markdown/eui_markdown_react_embeddable.tsx
index 2ad9cd639a22..7c262d744a55 100644
--- a/examples/embeddable_examples/public/react_embeddables/eui_markdown/eui_markdown_react_embeddable.tsx
+++ b/examples/embeddable_examples/public/react_embeddables/eui_markdown/eui_markdown_react_embeddable.tsx
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiMarkdownEditor, EuiMarkdownFormat } from '@elastic/eui';
+import { EuiMarkdownEditor, EuiMarkdownFormat, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
 import { i18n } from '@kbn/i18n';
@@ -16,7 +16,6 @@ import {
   useInheritedViewMode,
   useStateFromPublishingSubject,
 } from '@kbn/presentation-publishing';
-import { euiThemeVars } from '@kbn/ui-theme';
 import React from 'react';
 import { BehaviorSubject } from 'rxjs';
 import { EUI_MARKDOWN_ID } from './constants';
@@ -80,6 +79,7 @@ export const markdownEmbeddableFactory: ReactEmbeddableFactory<
         // get state for rendering
         const content = useStateFromPublishingSubject(content$);
         const viewMode = useInheritedViewMode(api) ?? 'view';
+        const { euiTheme } = useEuiTheme();
 
         return viewMode === 'edit' ? (
           <EuiMarkdownEditor
@@ -96,7 +96,7 @@ export const markdownEmbeddableFactory: ReactEmbeddableFactory<
         ) : (
           <EuiMarkdownFormat
             css={css`
-              padding: ${euiThemeVars.euiSizeM};
+              padding: ${euiTheme.size.m};
             `}
           >
             {content ?? ''}
diff --git a/examples/embeddable_examples/public/react_embeddables/field_list/field_list_react_embeddable.tsx b/examples/embeddable_examples/public/react_embeddables/field_list/field_list_react_embeddable.tsx
index c6b13d241997..c88219d1fafc 100644
--- a/examples/embeddable_examples/public/react_embeddables/field_list/field_list_react_embeddable.tsx
+++ b/examples/embeddable_examples/public/react_embeddables/field_list/field_list_react_embeddable.tsx
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import type { Reference } from '@kbn/content-management-utils';
 import { CoreStart } from '@kbn/core-lifecycle-browser';
@@ -17,7 +17,6 @@ import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
 import { i18n } from '@kbn/i18n';
 import { initializeTitles, useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
 import { LazyDataViewPicker, withSuspense } from '@kbn/presentation-util-plugin/public';
-import { euiThemeVars } from '@kbn/ui-theme';
 import {
   UnifiedFieldListSidebarContainer,
   type UnifiedFieldListSidebarContainerProps,
@@ -150,6 +149,7 @@ export const getFieldListFactory = (
             dataViews$,
             selectedFieldNames$
           );
+          const { euiTheme } = useEuiTheme();
 
           const selectedDataView = renderDataViews?.[0];
 
@@ -165,7 +165,7 @@ export const getFieldListFactory = (
               <EuiFlexItem
                 grow={false}
                 css={css`
-                  padding: ${euiThemeVars.euiSizeS};
+                  padding: ${euiTheme.size.s};
                 `}
               >
                 <DataViewPicker
diff --git a/examples/embeddable_examples/public/react_embeddables/saved_book/saved_book_react_embeddable.tsx b/examples/embeddable_examples/public/react_embeddables/saved_book/saved_book_react_embeddable.tsx
index 74cd81cf51bd..1768330d218d 100644
--- a/examples/embeddable_examples/public/react_embeddables/saved_book/saved_book_react_embeddable.tsx
+++ b/examples/embeddable_examples/public/react_embeddables/saved_book/saved_book_react_embeddable.tsx
@@ -7,7 +7,15 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiBadge, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui';
+import {
+  EuiBadge,
+  EuiCallOut,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+  EuiTitle,
+  useEuiTheme,
+} from '@elastic/eui';
 import { css } from '@emotion/react';
 import { CoreStart } from '@kbn/core-lifecycle-browser';
 import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
@@ -18,7 +26,6 @@ import {
   SerializedTitles,
   useBatchedPublishingSubjects,
 } from '@kbn/presentation-publishing';
-import { euiThemeVars } from '@kbn/ui-theme';
 import React from 'react';
 import { BehaviorSubject } from 'rxjs';
 import { PresentationContainer } from '@kbn/presentation-containers';
@@ -157,6 +164,7 @@ export const getSavedBookEmbeddableFactory = (core: CoreStart) => {
               bookAttributesManager.bookTitle,
               bookAttributesManager.bookSynopsis
             );
+          const { euiTheme } = useEuiTheme();
 
           return (
             <div
@@ -182,7 +190,7 @@ export const getSavedBookEmbeddableFactory = (core: CoreStart) => {
               )}
               <div
                 css={css`
-                  padding: ${euiThemeVars.euiSizeM};
+                  padding: ${euiTheme.size.m};
                 `}
               >
                 <EuiFlexGroup
diff --git a/examples/embeddable_examples/public/react_embeddables/search/search_react_embeddable.tsx b/examples/embeddable_examples/public/react_embeddables/search/search_react_embeddable.tsx
index 4196ae965c3e..d45018abda6a 100644
--- a/examples/embeddable_examples/public/react_embeddables/search/search_react_embeddable.tsx
+++ b/examples/embeddable_examples/public/react_embeddables/search/search_react_embeddable.tsx
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiBadge, EuiStat } from '@elastic/eui';
+import { EuiBadge, EuiStat, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { DataView } from '@kbn/data-views-plugin/common';
 import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public';
@@ -17,7 +17,6 @@ import {
   initializeTimeRange,
   useBatchedPublishingSubjects,
 } from '@kbn/presentation-publishing';
-import { euiThemeVars } from '@kbn/ui-theme';
 import React, { useEffect } from 'react';
 import { BehaviorSubject, switchMap, tap } from 'rxjs';
 import { SEARCH_EMBEDDABLE_ID } from './constants';
@@ -124,6 +123,7 @@ export const getSearchEmbeddableFactory = (services: Services) => {
         api,
         Component: () => {
           const [count, error] = useBatchedPublishingSubjects(count$, blockingError$);
+          const { euiTheme } = useEuiTheme();
 
           useEffect(() => {
             return () => {
@@ -138,7 +138,7 @@ export const getSearchEmbeddableFactory = (services: Services) => {
             <div
               css={css`
                 width: 100%;
-                padding: ${euiThemeVars.euiSizeM};
+                padding: ${euiTheme.size.m};
               `}
             >
               <EuiStat
diff --git a/examples/embeddable_examples/tsconfig.json b/examples/embeddable_examples/tsconfig.json
index d7aa8342de0c..23cf4052c791 100644
--- a/examples/embeddable_examples/tsconfig.json
+++ b/examples/embeddable_examples/tsconfig.json
@@ -18,7 +18,6 @@
     "@kbn/dashboard-plugin",
     "@kbn/embeddable-plugin",
     "@kbn/presentation-publishing",
-    "@kbn/ui-theme",
     "@kbn/i18n",
     "@kbn/es-query",
     "@kbn/data-views-plugin",