diff --git a/changelogs/upcoming/7572.md b/changelogs/upcoming/7572.md
new file mode 100644
index 00000000000..cdb9a9f418d
--- /dev/null
+++ b/changelogs/upcoming/7572.md
@@ -0,0 +1,5 @@
+**Deprecations**
+
+- Deprecated all charts theme exports in favor of `@elastic/charts` exports:
+  - Deprecated `EUI_CHARTS_THEME_<DARK|LIGHT>` in favor of `<DARK|LIGHT>_THEME` from `@elastic/charts`. ([#7572](https://github.com/elastic/eui/pull/7572))
+  - Deprecated `EUI_SPARKLINE_THEME_PARTIAL` in favor of `useSparklineOverrides` theme from the kibana `charts` plugin `theme` service.
diff --git a/package.json b/package.json
index 5e1464bb263..1f4b95b6bac 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,7 @@
     "@cypress/react": "^7.0.3",
     "@cypress/react18": "^2.0.0",
     "@cypress/webpack-dev-server": "^1.7.0",
-    "@elastic/charts": "^64.0.2",
+    "@elastic/charts": "^64.1.0",
     "@elastic/datemath": "^5.0.3",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/cache": "^11.11.0",
diff --git a/src-docs/src/components/guide_section/_utils.test.js b/src-docs/src/components/guide_section/_utils.test.js
index 502fe6ea2b2..c63b89a059d 100644
--- a/src-docs/src/components/guide_section/_utils.test.js
+++ b/src-docs/src/components/guide_section/_utils.test.js
@@ -8,13 +8,13 @@ describe('renderJsSourceCode', () => {
         renderJsSourceCode({
           default: dedent(`
             import { EuiButton } from '../src/components';
-  
+
             export default () => <EuiButton>Hello world!</EuiButton>;`),
         })
       ).toEqual(
         dedent(`
             import { EuiButton } from '@elastic/eui';
-  
+
             export default () => <EuiButton>Hello world!</EuiButton>;`)
       );
     });
@@ -26,13 +26,13 @@ describe('renderJsSourceCode', () => {
             import { EuiCode } from '../../../src/components/code';
             import { EuiCallOut } from '../../../src/components/callout';
             import { useGeneratedHtmlId } from '../../../src/services';
-  
+
             export default () => <EuiCode>{useGeneratedHtmlId()}</EuiCode>;`),
         })
       ).toEqual(
         dedent(`
             import { EuiCode, EuiCallOut, useGeneratedHtmlId } from '@elastic/eui';
-  
+
             export default () => <EuiCode>{useGeneratedHtmlId()}</EuiCode>;`)
       );
     });
@@ -43,7 +43,7 @@ describe('renderJsSourceCode', () => {
           default: dedent(`
             import { EuiButton, EuiFlexGroup, EuiFlexItem } from '../../src/components';
             import { useGeneratedHtmlId } from '../../src/services';
-  
+
             export default () => <EuiCode>{useGeneratedHtmlId()}</EuiCode>;`),
         })
       ).toEqual(
@@ -54,7 +54,7 @@ describe('renderJsSourceCode', () => {
               EuiFlexItem,
               useGeneratedHtmlId,
             } from '@elastic/eui';
-  
+
             export default () => <EuiCode>{useGeneratedHtmlId()}</EuiCode>;`)
       );
     });
@@ -63,14 +63,14 @@ describe('renderJsSourceCode', () => {
       expect(
         renderJsSourceCode({
           default: dedent(`
-            import { EUI_CHARTS_THEME_DARK } from '@elastic/eui';
-  
+            import { SOME_RANDOM_IMPORT } from '@elastic/eui';
+
             export default () => 'Hello world!';`),
         })
       ).toEqual(
         dedent(`
-          import { EUI_CHARTS_THEME_DARK } from '@elastic/eui';
-  
+          import { SOME_RANDOM_IMPORT } from '@elastic/eui';
+
           export default () => 'Hello world!';`)
       );
     });
@@ -80,13 +80,13 @@ describe('renderJsSourceCode', () => {
         renderJsSourceCode({
           default: dedent(`
             import { EuiPageTemplate_Deprecated as EuiPageTemplate } from '@elastic/eui';
-  
+
             export default () => 'Hello world!';`),
         })
       ).toEqual(
         dedent(`
           import { EuiPageTemplate_Deprecated as EuiPageTemplate } from '@elastic/eui';
-  
+
           export default () => 'Hello world!';`)
       );
     });
@@ -99,14 +99,14 @@ describe('renderJsSourceCode', () => {
           default: dedent(`
             import { EuiButton } from '../../src/components';
             import React, { useState } from 'react';
-  
+
             export default () => <EuiButton>Hello world!</EuiButton>;`),
         })
       ).toEqual(
         dedent(`
             import React, { useState } from 'react';
             import { EuiButton } from '@elastic/eui';
-  
+
             export default () => <EuiButton>Hello world!</EuiButton>;`)
       );
     });
@@ -129,7 +129,7 @@ describe('renderJsSourceCode', () => {
               _mockDepMultiline,
               mockDepMultiline,
             } from 'fakeDep000';
-  
+
             export default () => <EuiButton>Hello world!</EuiButton>;`),
         })
       ).toEqual(
@@ -146,7 +146,7 @@ describe('renderJsSourceCode', () => {
               _mockDepMultiline,
               mockDepMultiline,
             } from 'fakeDep000';
-  
+
             export default () => <EuiButton>Hello world!</EuiButton>;`)
       );
     });
@@ -159,7 +159,7 @@ describe('renderJsSourceCode', () => {
             import { EuiButton } from '@elastic/eui';
             // @ts-ignore no types definitions
             import hello from 'world';
-  
+
             export default () => <EuiButton>Hello world!</EuiButton>;`),
         })
       ).toEqual(
@@ -180,15 +180,15 @@ describe('renderJsSourceCode', () => {
         renderJsSourceCode({
           default: dedent(`
             import React, { useState } from 'react';
-  
+
             import { EuiButton } from '../../src/components';
-  
+
             import { useGeneratedHtmlId } from '../../../src/services';
-  
+
             import hello from 'world';
-  
+
             import { data } from '../data_store';
-  
+
             export default () => <EuiButton>Hello world!</EuiButton>;`),
         })
       ).toEqual(
@@ -197,7 +197,7 @@ describe('renderJsSourceCode', () => {
             import { EuiButton, useGeneratedHtmlId } from '@elastic/eui';
             import hello from 'world';
             import { data } from '../data_store';
-  
+
             export default () => <EuiButton>Hello world!</EuiButton>;`)
       );
     });
@@ -211,13 +211,13 @@ describe('renderJsSourceCode', () => {
         renderJsSourceCode({
           default: dedent(`
             import { EuiButton } from '@elastic/eui';
-  
+
             export default () => 'Hello world!';`),
         })
       ).toEqual(
         dedent(`
             import { EuiButton } from '@elastic/eui';
-  
+
             export default () => 'Hello world!';`)
       );
     });
@@ -227,13 +227,13 @@ describe('renderJsSourceCode', () => {
         renderJsSourceCode({
           default: dedent(`
             import React from 'react';
-  
+
             export default () => 'Hello world!';`),
         })
       ).toEqual(
         dedent(`
             import React from 'react';
-  
+
             export default () => 'Hello world!';`)
       );
     });
@@ -243,13 +243,13 @@ describe('renderJsSourceCode', () => {
         renderJsSourceCode({
           default: dedent(`
             import hello from 'world';
-  
+
             export default () => 'Hello world!';`),
         })
       ).toEqual(
         dedent(`
             import hello from 'world';
-  
+
             export default () => 'Hello world!';`)
       );
     });
@@ -260,14 +260,14 @@ describe('renderJsSourceCode', () => {
           default: dedent(`
             import React from 'react';
             import hello from 'world';
-  
+
             export default () => 'Hello world!';`),
         })
       ).toEqual(
         dedent(`
             import React from 'react';
             import hello from 'world';
-  
+
             export default () => 'Hello world!';`)
       );
     });
@@ -278,14 +278,14 @@ describe('renderJsSourceCode', () => {
           default: dedent(`
             import { is } from '@elastic/eui';
             import hello from 'world';
-  
+
             export default () => 'Hello world!';`),
         })
       ).toEqual(
         dedent(`
             import { is } from '@elastic/eui';
             import hello from 'world';
-  
+
             export default () => 'Hello world!';`)
       );
     });
@@ -301,7 +301,7 @@ describe('renderJsSourceCode', () => {
               EuiButton,
               EuiCode,
             } from '@elastic/eui';
-  
+
             export default () => 'Hello world!';`),
         })
       ).toEqual(
@@ -326,7 +326,7 @@ describe('renderJsSourceCode', () => {
             const jsCode = \`/* I'm an example of JS */
             import React from 'react';
             const hello = 'world';\`;
-  
+
             export default () => 'Hello world!';`),
         })
       ).toEqual(
@@ -337,7 +337,7 @@ describe('renderJsSourceCode', () => {
             const jsCode = \`/* I'm an example of JS */
             import React from 'react';
             const hello = 'world';\`;
-  
+
             export default () => 'Hello world!';`)
       );
     });
diff --git a/src-docs/src/theme_dark.scss b/src-docs/src/theme_dark.scss
index dbf2c140d0a..741f8b05197 100644
--- a/src-docs/src/theme_dark.scss
+++ b/src-docs/src/theme_dark.scss
@@ -5,4 +5,3 @@
 
 // Elastic charts
 @import '~@elastic/charts/dist/theme';
-@import '../../src/themes/charts/theme';
diff --git a/src-docs/src/theme_light.scss b/src-docs/src/theme_light.scss
index 479beb1dc87..7ce2d476aae 100644
--- a/src-docs/src/theme_light.scss
+++ b/src-docs/src/theme_light.scss
@@ -5,4 +5,3 @@
 
 // Elastic charts
 @import '~@elastic/charts/dist/theme';
-@import '../../src/themes/charts/theme';
diff --git a/src-docs/src/views/elastic_charts/accessibility_bullet.tsx b/src-docs/src/views/elastic_charts/accessibility_bullet.tsx
index 324fc35a4db..1fc8958f24e 100644
--- a/src-docs/src/views/elastic_charts/accessibility_bullet.tsx
+++ b/src-docs/src/views/elastic_charts/accessibility_bullet.tsx
@@ -8,22 +8,13 @@ import {
   euiPaletteGray,
   useEuiTheme,
 } from '../../../../src/services';
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../src/themes/charts/themes';
+import { useChartBaseTheme } from './utils/use_chart_base_theme';
 
 export default () => {
-  const { colorMode } = useEuiTheme();
   const id = htmlIdGenerator()();
-
-  /**
-   * Setup theme based on current light/dark theme
-   */
+  const { colorMode } = useEuiTheme();
   const isDarkTheme = colorMode === 'DARK';
-  const euiChartTheme = isDarkTheme
-    ? EUI_CHARTS_THEME_DARK
-    : EUI_CHARTS_THEME_LIGHT;
+  const chartBaseTheme = useChartBaseTheme();
 
   const bandLabels = ['freezing', 'cold', 'brisk', 'warm', 'hot'];
   const bands = [0, 100, 125, 150, 250];
@@ -50,7 +41,7 @@ export default () => {
       <EuiSpacer />
       <Chart size={{ height: 200 }}>
         <Settings
-          theme={euiChartTheme.theme}
+          baseTheme={chartBaseTheme}
           ariaLabelledBy={id}
           ariaDescription="This goal chart has a target of 260."
           ariaUseDefaultSummary={false}
diff --git a/src-docs/src/views/elastic_charts/accessibility_sunburst.tsx b/src-docs/src/views/elastic_charts/accessibility_sunburst.tsx
index 0f395cb97fc..9217a243ecb 100644
--- a/src-docs/src/views/elastic_charts/accessibility_sunburst.tsx
+++ b/src-docs/src/views/elastic_charts/accessibility_sunburst.tsx
@@ -1,25 +1,15 @@
 import React from 'react';
 import { Chart, Partition, Settings, PartitionLayout } from '@elastic/charts';
 
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../src/themes/charts/themes';
 import { EuiTitle, EuiSpacer } from '../../../../src/components';
-import { useEuiTheme, htmlIdGenerator } from '../../../../src/services';
+import { htmlIdGenerator } from '../../../../src/services';
+import { useChartBaseTheme } from './utils/use_chart_base_theme';
 
 export default () => {
-  const { colorMode } = useEuiTheme();
+  const chartBaseTheme = useChartBaseTheme();
   const id = htmlIdGenerator()();
 
-  /**
-   * Setup theme based on current light/dark theme
-   */
-  const isDarkTheme = colorMode === 'DARK';
-  const euiChartTheme = isDarkTheme
-    ? EUI_CHARTS_THEME_DARK
-    : EUI_CHARTS_THEME_LIGHT;
-  const { vizColors } = euiChartTheme.theme.colors!;
+  const { vizColors } = chartBaseTheme.colors;
 
   type Data = { fruit: string; count: number };
   const data: Data[] = [
@@ -49,7 +39,7 @@ export default () => {
       <EuiSpacer />
       <Chart size={{ height: 200 }}>
         <Settings
-          theme={euiChartTheme.theme}
+          baseTheme={chartBaseTheme}
           ariaLabelledBy={id}
           ariaDescription="There is a great variety of reported favorite fruit"
           ariaTableCaption="For the chart representation, after Clementine (22) individual results are not labelled as the segments become too small"
diff --git a/src-docs/src/views/elastic_charts/category_chart.tsx b/src-docs/src/views/elastic_charts/category_chart.tsx
index 2ba9a70b991..7611d0a9a01 100644
--- a/src-docs/src/views/elastic_charts/category_chart.tsx
+++ b/src-docs/src/views/elastic_charts/category_chart.tsx
@@ -2,12 +2,7 @@ import React, { useState } from 'react';
 import orderBy from 'lodash/orderBy';
 import round from 'lodash/round';
 
-import { Chart, Settings, Axis } from '@elastic/charts';
-
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../src/themes/charts/themes';
+import { Chart, Settings, Axis, PartialTheme } from '@elastic/charts';
 
 import {
   EuiSwitch,
@@ -20,8 +15,6 @@ import {
   EuiButton,
 } from '../../../../src/components';
 
-import { useEuiTheme } from '../../../../src/services';
-
 import { SIMPLE_GITHUB_DATASET, GITHUB_DATASET } from './data';
 import {
   ChartTypeCard,
@@ -30,9 +23,10 @@ import {
   type ChartType,
   ChartCard,
 } from './shared';
+import { useChartBaseTheme } from './utils/use_chart_base_theme';
 
 export default () => {
-  const { colorMode } = useEuiTheme();
+  const chartBaseTheme = useChartBaseTheme();
 
   const [multi, setMulti] = useState(false);
   const [stacked, setStacked] = useState(false);
@@ -42,11 +36,6 @@ export default () => {
   const [chartType, setChartType] = useState<ChartType>('BarSeries');
   const [valueLabels, setValueLabels] = useState(false);
 
-  const isDarkTheme = colorMode === 'DARK';
-  const theme = isDarkTheme
-    ? EUI_CHARTS_THEME_DARK.theme
-    : EUI_CHARTS_THEME_LIGHT.theme;
-
   const ChartType = CHART_COMPONENTS[chartType];
 
   const DATASET = multi ? GITHUB_DATASET : SIMPLE_GITHUB_DATASET;
@@ -55,11 +44,9 @@ export default () => {
     showValueLabel: true,
   };
 
-  const customTheme = {
-    ...theme,
+  const themeOverrides: PartialTheme = {
     barSeriesStyle: {
       displayValue: {
-        ...theme.barSeriesStyle?.displayValue,
         offsetX: rotated ? 4 : 0,
         offsetY: rotated ? 0 : -4,
         ...(multi && stacked
@@ -97,15 +84,13 @@ export default () => {
         horizontal: 'center',
       }`;
 
-  const chartVariablesForValueLabels = `const theme = isDarkTheme
-  ? EUI_CHARTS_THEME_DARK.theme
-  : EUI_CHARTS_THEME_LIGHT.theme;
+  const chartVariablesForValueLabels = `const baseTheme = isDarkTheme
+  ? DARK_THEME
+  : LIGHT_THEME;
 
-const customTheme = {
-  ...theme,
+const themeOverrides = {
   barSeriesStyle: {
     displayValue: {
-      ...theme.barSeriesStyle.displayValue,
       offsetX: ${rotated ? '4' : '0'},
       offsetY: ${rotated ? '0' : '-4'},
       ${multi && stacked ? defaultAlignmentToCopy : alignmentRotatedToCopy},
@@ -125,7 +110,7 @@ const customTheme = {
 
   const chartConfigurationToCopy = `<Chart size={{height: 300}}>
   <Settings
-    theme={${valueLabels ? 'customTheme' : 'theme'}}
+    baseTheme={baseTheme}${valueLabels ? '\n    theme={themeOverrides}' : ''}
     rotation={${rotated ? 90 : 0}}
     showLegend={${multi}}
     ${multi ? 'legendPosition="right"' : ''}
@@ -176,7 +161,8 @@ ${removeEmptyLines(chartConfigurationToCopy)}`
 
       <Chart size={{ height: 400 }}>
         <Settings
-          theme={customTheme}
+          baseTheme={chartBaseTheme}
+          theme={themeOverrides}
           showLegend={multi}
           legendPosition="right"
           rotation={rotated ? 90 : 0}
diff --git a/src-docs/src/views/elastic_charts/goal.tsx b/src-docs/src/views/elastic_charts/goal.tsx
index e3a215253e9..7eb636c7afb 100644
--- a/src-docs/src/views/elastic_charts/goal.tsx
+++ b/src-docs/src/views/elastic_charts/goal.tsx
@@ -3,26 +3,16 @@ import { Chart, Settings, Goal } from '@elastic/charts';
 import { EuiSpacer, EuiTitle, EuiCodeBlock } from '../../../../src/components';
 import {
   htmlIdGenerator,
-  useEuiTheme,
   useIsWithinBreakpoints,
   euiPaletteGreen,
 } from '../../../../src/services';
 import { EuiFlexGrid, EuiFlexItem } from '../../../../src/components/flex';
-
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../src/themes/charts/themes';
+import { useChartBaseTheme } from './utils/use_chart_base_theme';
 
 export const GoalChart = () => {
-  const { colorMode } = useEuiTheme();
+  const chartBaseTheme = useChartBaseTheme();
   const id = htmlIdGenerator('goal')();
 
-  const isDarkTheme = colorMode === 'DARK';
-  const euiChartTheme = isDarkTheme
-    ? EUI_CHARTS_THEME_DARK
-    : EUI_CHARTS_THEME_LIGHT;
-
   const isDesktop = useIsWithinBreakpoints(['l', 'xl']);
   const bandLabels = ['', 'freezing', 'cold', 'warm', 'hot'];
   const bands = [-10, 0, 15, 25, 40];
@@ -51,10 +41,10 @@ export const GoalChart = () => {
         <EuiSpacer />
         <Chart size={{ height: 200 }}>
           <Settings
+            baseTheme={chartBaseTheme}
             ariaLabelledBy={id}
             ariaDescription="This goal chart has a target of 22."
             ariaUseDefaultSummary={false}
-            theme={euiChartTheme.theme}
           />
           <Goal
             id="goalId"
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_grid.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_grid.tsx
index e8fb53581fd..f5043a4f420 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_grid.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_grid.tsx
@@ -1,17 +1,7 @@
 import React from 'react';
-import { EuiIcon, EuiPanel, useEuiTheme } from '../../../../../src';
-import {
-  Chart,
-  DARK_THEME,
-  LIGHT_THEME,
-  Metric,
-  MetricSpec,
-  Settings,
-} from '@elastic/charts';
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../../src/themes/charts/themes';
+import { EuiIcon, EuiPanel } from '../../../../../src';
+import { Chart, Metric, MetricSpec, Settings } from '@elastic/charts';
+import { useChartBaseTheme } from '../utils/use_chart_base_theme';
 
 const osTrend = Array.from({ length: 30 }).map((d, i) => ({
   x: i,
@@ -141,16 +131,11 @@ const DATA: MetricSpec['data'] = [
 ];
 
 export default () => {
-  const { colorMode } = useEuiTheme();
-  const isDarkTheme = colorMode === 'DARK';
-  const euiChartTheme = isDarkTheme
-    ? EUI_CHARTS_THEME_DARK
-    : EUI_CHARTS_THEME_LIGHT;
-  const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
+  const chartBaseTheme = useChartBaseTheme();
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 800 }}>
       <Chart size={[800, 300]}>
-        <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
+        <Settings baseTheme={chartBaseTheme} />
         <Metric id="1" data={DATA} />
       </Chart>
     </EuiPanel>
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_grid_column.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_grid_column.tsx
index d5c6bff2679..11c09e651d4 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_grid_column.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_grid_column.tsx
@@ -1,29 +1,15 @@
 import React from 'react';
-import { EuiPanel, useEuiTheme } from '../../../../../src';
-import {
-  Chart,
-  DARK_THEME,
-  LayoutDirection,
-  LIGHT_THEME,
-  Metric,
-  Settings,
-} from '@elastic/charts';
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../../src/themes/charts/themes';
+import { EuiPanel } from '../../../../../src';
+import { Chart, LayoutDirection, Metric, Settings } from '@elastic/charts';
+import { useChartBaseTheme } from '../utils/use_chart_base_theme';
 
 export default () => {
-  const { colorMode } = useEuiTheme();
-  const isDarkTheme = colorMode === 'DARK';
-  const euiChartTheme = isDarkTheme
-    ? EUI_CHARTS_THEME_DARK
-    : EUI_CHARTS_THEME_LIGHT;
-  const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
+  const chartBaseTheme = useChartBaseTheme();
+
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 200 }}>
       <Chart size={[200, 400]}>
-        <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
+        <Settings baseTheme={chartBaseTheme} />
         <Metric
           id="1"
           data={[
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_grid_row.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_grid_row.tsx
index 4209e1876fb..b5d7b94a2fe 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_grid_row.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_grid_row.tsx
@@ -1,29 +1,15 @@
 import React from 'react';
-import { EuiPanel, useEuiTheme } from '../../../../../src';
-import {
-  Chart,
-  DARK_THEME,
-  LayoutDirection,
-  LIGHT_THEME,
-  Metric,
-  Settings,
-} from '@elastic/charts';
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../../src/themes/charts/themes';
+import { EuiPanel } from '../../../../../src';
+import { Chart, LayoutDirection, Metric, Settings } from '@elastic/charts';
+import { useChartBaseTheme } from '../utils/use_chart_base_theme';
 
 export default () => {
-  const { colorMode } = useEuiTheme();
-  const isDarkTheme = colorMode === 'DARK';
-  const euiChartTheme = isDarkTheme
-    ? EUI_CHARTS_THEME_DARK
-    : EUI_CHARTS_THEME_LIGHT;
-  const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
+  const chartBaseTheme = useChartBaseTheme();
+
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 600 }}>
       <Chart size={[600, 200]}>
-        <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
+        <Settings baseTheme={chartBaseTheme} />
         <Metric
           id="1"
           data={[
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_no_data.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_no_data.tsx
index 62388e74c88..69d029954c5 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_no_data.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_no_data.tsx
@@ -4,28 +4,13 @@ import {
   EuiFlexItem,
   EuiPanel,
   EuiText,
-  useEuiTheme,
 } from '../../../../../src';
-import {
-  Chart,
-  DARK_THEME,
-  LIGHT_THEME,
-  Metric,
-  Settings,
-} from '@elastic/charts';
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../../src/themes/charts/themes';
+import { Chart, Metric, Settings } from '@elastic/charts';
+import { useChartBaseTheme } from '../utils/use_chart_base_theme';
 
 export default () => {
-  const { colorMode } = useEuiTheme();
-  const isDarkTheme = colorMode === 'DARK';
+  const chartBaseTheme = useChartBaseTheme();
 
-  const euiChartTheme = isDarkTheme
-    ? EUI_CHARTS_THEME_DARK
-    : EUI_CHARTS_THEME_LIGHT;
-  const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
   return (
     <EuiFlexGroup gutterSize="l" alignItems="flexStart">
       <EuiFlexItem grow={0}>
@@ -33,10 +18,7 @@ export default () => {
           <EuiText textAlign="center">No Data</EuiText>
           <EuiPanel paddingSize="none" style={{ overflow: 'hidden' }}>
             <Chart size={[200, 200]}>
-              <Settings
-                baseTheme={chartBaseTheme}
-                theme={euiChartTheme.theme}
-              />
+              <Settings baseTheme={chartBaseTheme} />
               <Metric
                 id="1"
                 data={[
@@ -64,10 +46,7 @@ export default () => {
           <EuiText textAlign="center">Filtered Out</EuiText>
           <EuiPanel paddingSize="none" style={{ overflow: 'hidden' }}>
             <Chart size={[200, 200]}>
-              <Settings
-                theme={euiChartTheme.theme}
-                baseTheme={chartBaseTheme}
-              />
+              <Settings baseTheme={chartBaseTheme} />
               <Metric id="1" data={[[undefined]]} />{' '}
             </Chart>
           </EuiPanel>
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_overview.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_overview.tsx
index 15862ec3c2f..558ea1da286 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_overview.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_overview.tsx
@@ -1,25 +1,11 @@
 import React from 'react';
-import { EuiPanel, useEuiTheme } from '../../../../../src';
-import {
-  Chart,
-  DARK_THEME,
-  LIGHT_THEME,
-  Metric,
-  Settings,
-} from '@elastic/charts';
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../../src/themes/charts/themes';
+import { EuiPanel } from '../../../../../src';
+import { Chart, Metric, Settings } from '@elastic/charts';
+import { useChartBaseTheme } from '../utils/use_chart_base_theme';
 
 export default () => {
-  const { colorMode } = useEuiTheme();
-  const isDarkTheme = colorMode === 'DARK';
+  const chartBaseTheme = useChartBaseTheme();
 
-  const euiChartTheme = isDarkTheme
-    ? EUI_CHARTS_THEME_DARK
-    : EUI_CHARTS_THEME_LIGHT;
-  const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
   const data = Array.from({ length: 30 }).map((d, i) => ({
     x: i,
     y: Math.random() * 1000 + 10000,
@@ -27,7 +13,7 @@ export default () => {
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 200 }}>
       <Chart size={[200, 200]}>
-        <Settings theme={euiChartTheme.theme} baseTheme={chartBaseTheme} />
+        <Settings baseTheme={chartBaseTheme} />
         <Metric
           id="1"
           data={[
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_progress_bar.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_progress_bar.tsx
index cd1df762b94..5774a202203 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_progress_bar.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_progress_bar.tsx
@@ -1,31 +1,11 @@
 import React from 'react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPanel,
-  useEuiTheme,
-} from '../../../../../src';
-import {
-  Chart,
-  DARK_THEME,
-  LayoutDirection,
-  LIGHT_THEME,
-  Metric,
-  Settings,
-} from '@elastic/charts';
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../../src/themes/charts/themes';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '../../../../../src';
+import { Chart, LayoutDirection, Metric, Settings } from '@elastic/charts';
+import { useChartBaseTheme } from '../utils/use_chart_base_theme';
 
 export default () => {
-  const { colorMode } = useEuiTheme();
-  const isDarkTheme = colorMode === 'DARK';
+  const chartBaseTheme = useChartBaseTheme();
 
-  const euiChartTheme = isDarkTheme
-    ? EUI_CHARTS_THEME_DARK
-    : EUI_CHARTS_THEME_LIGHT;
-  const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
   return (
     <EuiFlexGroup gutterSize="l" alignItems="flexStart" direction="row">
       <EuiFlexItem grow={false}>
@@ -34,7 +14,7 @@ export default () => {
           style={{ overflow: 'hidden', width: '200px' }}
         >
           <Chart size={[200, 200]}>
-            <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
+            <Settings baseTheme={chartBaseTheme} />
             <Metric
               id="1"
               data={[
@@ -65,7 +45,7 @@ export default () => {
           style={{ overflow: 'hidden', width: '200px' }}
         >
           <Chart size={[200, 200]}>
-            <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
+            <Settings baseTheme={chartBaseTheme} />
             <Metric
               id="1"
               data={[
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_resizing.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_resizing.tsx
index 4b47c179674..aac8e49d19f 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_resizing.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_resizing.tsx
@@ -1,25 +1,11 @@
-import { EuiPanel, useEuiTheme } from '../../../../../src';
+import { EuiPanel } from '../../../../../src';
 
-import {
-  Chart,
-  DARK_THEME,
-  LIGHT_THEME,
-  Metric,
-  Settings,
-} from '@elastic/charts';
+import { Chart, Metric, Settings } from '@elastic/charts';
 import React from 'react';
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../../src/themes/charts/themes';
+import { useChartBaseTheme } from '../utils/use_chart_base_theme';
 
 export default () => {
-  const { colorMode } = useEuiTheme();
-  const isDarkTheme = colorMode === 'DARK';
-  const euiChartTheme = isDarkTheme
-    ? EUI_CHARTS_THEME_DARK
-    : EUI_CHARTS_THEME_LIGHT;
-  const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
+  const chartBaseTheme = useChartBaseTheme();
 
   return (
     <div
@@ -42,7 +28,7 @@ export default () => {
           style={{ overflow: 'hidden', height: '100%', width: '100%' }}
         >
           <Chart size={['100%', '100%']}>
-            <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
+            <Settings baseTheme={chartBaseTheme} />
             <Metric
               id="1"
               data={[
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_single_value.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_single_value.tsx
index ad973dca3e9..006a80cbbbf 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_single_value.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_single_value.tsx
@@ -3,29 +3,14 @@ import {
   EuiFlexItem,
   EuiPanel,
   EuiRange,
-  useEuiTheme,
 } from '../../../../../src';
-import {
-  Chart,
-  DARK_THEME,
-  LIGHT_THEME,
-  Metric,
-  Settings,
-} from '@elastic/charts';
+import { Chart, Metric, Settings } from '@elastic/charts';
 import React, { useState } from 'react';
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../../src/themes/charts/themes';
+import { useChartBaseTheme } from '../utils/use_chart_base_theme';
 
 export default () => {
-  const { colorMode } = useEuiTheme();
-  const isDarkTheme = colorMode === 'DARK';
+  const chartBaseTheme = useChartBaseTheme();
 
-  const euiChartTheme = isDarkTheme
-    ? EUI_CHARTS_THEME_DARK
-    : EUI_CHARTS_THEME_LIGHT;
-  const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
   const customTicks = [
     { label: '', value: 0 },
     { label: '', value: 1 },
@@ -75,7 +60,7 @@ export default () => {
       <EuiFlexItem grow={0}>
         <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 200 }}>
           <Chart size={[200, 200]}>
-            <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
+            <Settings baseTheme={chartBaseTheme} />
             <Metric
               id="1"
               data={[
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_trend.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_trend.tsx
index 00653322f43..1b4031672b2 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_trend.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_trend.tsx
@@ -1,25 +1,10 @@
 import React from 'react';
-import { EuiPanel, useEuiTheme } from '../../../../../src';
-import {
-  Chart,
-  Metric,
-  Settings,
-  DARK_THEME,
-  LIGHT_THEME,
-} from '@elastic/charts';
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../../src/themes/charts/themes';
+import { EuiPanel } from '../../../../../src';
+import { Chart, Metric, Settings } from '@elastic/charts';
+import { useChartBaseTheme } from '../utils/use_chart_base_theme';
 
 export default () => {
-  const { colorMode } = useEuiTheme();
-  const isDarkTheme = colorMode === 'DARK';
-
-  const euiChartTheme = isDarkTheme
-    ? EUI_CHARTS_THEME_DARK
-    : EUI_CHARTS_THEME_LIGHT;
-  const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
+  const chartBaseTheme = useChartBaseTheme();
 
   const data = Array.from({ length: 30 }).map((d, i) => ({
     x: i,
@@ -29,7 +14,7 @@ export default () => {
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 200 }}>
       <Chart size={[200, 200]}>
-        <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
+        <Settings baseTheme={chartBaseTheme} />
         <Metric
           id="1"
           data={[
diff --git a/src-docs/src/views/elastic_charts/pie.tsx b/src-docs/src/views/elastic_charts/pie.tsx
index aac1e141b04..9c2d4c44f61 100644
--- a/src-docs/src/views/elastic_charts/pie.tsx
+++ b/src-docs/src/views/elastic_charts/pie.tsx
@@ -8,17 +8,14 @@ import {
   PartialTheme,
 } from '@elastic/charts';
 
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../src/themes/charts/themes';
 import {
   EuiFlexGrid,
   EuiFlexItem,
   EuiTitle,
   EuiSpacer,
 } from '../../../../src/components';
-import { htmlIdGenerator, useEuiTheme } from '../../../../src/services';
+import { htmlIdGenerator } from '../../../../src/services';
+import { useChartBaseTheme } from './utils/use_chart_base_theme';
 
 const STATUS_DATA = [
   {
@@ -47,19 +44,11 @@ const LANGUAGE_DATA = [
 ];
 
 export default () => {
-  const { colorMode } = useEuiTheme();
+  const chartBaseTheme = useChartBaseTheme();
   const htmlId = htmlIdGenerator();
   const exampleOne = htmlId();
   const exampleTwo = htmlId();
 
-  /**
-   * Setup theme based on current light/dark theme
-   */
-  const isDarkTheme = colorMode === 'DARK';
-  const euiChartTheme = isDarkTheme
-    ? EUI_CHARTS_THEME_DARK
-    : EUI_CHARTS_THEME_LIGHT;
-
   const themeOverrides: PartialTheme = {
     partition: { emptySizeRatio: 0.4 },
   };
@@ -74,7 +63,8 @@ export default () => {
           <EuiSpacer />
           <Chart size={{ height: 200 }}>
             <Settings
-              theme={[themeOverrides, euiChartTheme.theme]}
+              baseTheme={chartBaseTheme}
+              theme={themeOverrides}
               ariaLabelledBy={exampleOne}
             />
             <Partition
@@ -87,7 +77,7 @@ export default () => {
                   groupByRollup: (d: (typeof STATUS_DATA)[0]) => d.status,
                   shape: {
                     fillColor: (_, sortIndex) =>
-                      euiChartTheme.theme.colors!.vizColors![sortIndex],
+                      chartBaseTheme.colors.vizColors![sortIndex],
                   },
                 },
               ]}
@@ -101,7 +91,7 @@ export default () => {
           </EuiTitle>
           <EuiSpacer />
           <Chart size={{ height: 200 }}>
-            <Settings theme={euiChartTheme.theme} ariaLabelledBy={exampleTwo} />
+            <Settings baseTheme={chartBaseTheme} ariaLabelledBy={exampleTwo} />
             <Partition
               id="donutByLanguage"
               data={LANGUAGE_DATA}
@@ -113,7 +103,7 @@ export default () => {
                   groupByRollup: (d: (typeof LANGUAGE_DATA)[0]) => d.language,
                   shape: {
                     fillColor: (_, sortIndex) =>
-                      euiChartTheme.theme.colors!.vizColors![sortIndex],
+                      chartBaseTheme.colors.vizColors![sortIndex],
                   },
                 },
               ]}
diff --git a/src-docs/src/views/elastic_charts/pie_alts.tsx b/src-docs/src/views/elastic_charts/pie_alts.tsx
index 9446eac4e6b..7dcb18e0eaa 100644
--- a/src-docs/src/views/elastic_charts/pie_alts.tsx
+++ b/src-docs/src/views/elastic_charts/pie_alts.tsx
@@ -7,11 +7,6 @@ import sumBy from 'lodash/sumBy';
 
 import { Chart, Settings, Axis, BarSeries } from '@elastic/charts';
 
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../src/themes/charts/themes';
-
 import {
   EuiSwitch,
   EuiSpacer,
@@ -31,9 +26,12 @@ import {
 
 import { GITHUB_DATASET, GITHUB_DATASET_MOD, DAYS_OF_RAIN } from './data';
 import { ChartCard } from './shared';
+import { useChartBaseTheme } from './utils/use_chart_base_theme';
 
 export default () => {
   const { colorMode } = useEuiTheme();
+  const isDarkTheme = colorMode === 'DARK';
+  const chartBaseTheme = useChartBaseTheme();
 
   const [stacked, setStacked] = useState(true);
   const [rotated, setRotated] = useState(true);
@@ -42,11 +40,6 @@ export default () => {
   const [formattedData, setFormattedData] = useState(false);
   const [grouped, setGrouped] = useState(false);
 
-  const isDarkTheme = colorMode === 'DARK';
-  const theme = isDarkTheme
-    ? EUI_CHARTS_THEME_DARK.theme
-    : EUI_CHARTS_THEME_LIGHT.theme;
-
   let color = euiPaletteColorBlind({ rotations: 2, order: 'group' }).slice(
     18,
     20
@@ -135,7 +128,7 @@ export default () => {
           <EuiSpacer size="s" />
 
           <Chart size={{ height: 300 }}>
-            <Settings theme={theme} rotation={rotated ? 90 : 0} />
+            <Settings baseTheme={chartBaseTheme} rotation={rotated ? 90 : 0} />
             <BarSeries
               id="rain"
               name="Rain"
@@ -169,7 +162,7 @@ export default () => {
 
           <Chart size={{ height: 300 }}>
             <Settings
-              theme={theme}
+              baseTheme={chartBaseTheme}
               showLegend={true}
               legendPosition="right"
               rotation={rotated ? 90 : 0}
@@ -262,7 +255,7 @@ export default () => {
         <EuiCopy
           textToCopy={`<Chart size={{height: 300}}>
   <Settings
-    theme={isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme}
+    baseTheme={isDarkTheme ? DARK_THEME : LIGHT_THEME}
     rotation={${rotated ? 90 : 0}}
     showLegend={${usesRainData ? 'false' : 'true'}}
     ${usesRainData ? '' : 'legendPosition="right"'}
diff --git a/src-docs/src/views/elastic_charts/pie_example.js b/src-docs/src/views/elastic_charts/pie_example.js
index 11229ce620b..c64b074798e 100644
--- a/src-docs/src/views/elastic_charts/pie_example.js
+++ b/src-docs/src/views/elastic_charts/pie_example.js
@@ -198,12 +198,12 @@ export const ElasticChartsPieExample = {
         </>
       ),
       demo: <PieChart />,
-      snippet: `import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
+      snippet: `import { DARK_THEME, LIGHT_THEME } from '@elastic/charts';
 
-const euiChartTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK : EUI_CHARTS_THEME_LIGHT;
+const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
 
 <Chart size={{ height: 200 }}>
-  <Settings theme={euiChartTheme.theme} />
+  <Settings baseTheme={chartBaseTheme} />
   <Partition
     data={[
       {
@@ -217,7 +217,7 @@ const euiChartTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK : EUI_CHARTS_THEME_LIG
       {
         groupByRollup: d => d.category,
         shape: {
-          fillColor: (key, sortIndex) => euiChartTheme.theme.colors.vizColors[sortIndex],
+          fillColor: (key, sortIndex) => chartTheme.colors.vizColors[sortIndex],
         },
       },
     ]}
diff --git a/src-docs/src/views/elastic_charts/pie_slices.tsx b/src-docs/src/views/elastic_charts/pie_slices.tsx
index b135aea51d0..15bc2e481fe 100644
--- a/src-docs/src/views/elastic_charts/pie_slices.tsx
+++ b/src-docs/src/views/elastic_charts/pie_slices.tsx
@@ -1,11 +1,6 @@
 import React, { useState } from 'react';
 import { Chart, Partition, Settings, PartitionLayout } from '@elastic/charts';
 
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../src/themes/charts/themes';
-
 import {
   EuiSpacer,
   EuiFlexGrid,
@@ -23,17 +18,12 @@ import {
   EuiText,
 } from '../../../../src/components';
 
-import { useEuiTheme } from '../../../../src/services';
-
 import { ChartCard } from './shared';
 import { BROWSER_DATA_2019 } from './data';
+import { useChartBaseTheme } from './utils/use_chart_base_theme';
 
 export default () => {
-  const { colorMode } = useEuiTheme();
-  const isDarkTheme = colorMode === 'DARK';
-  const euiChartTheme = isDarkTheme
-    ? EUI_CHARTS_THEME_DARK
-    : EUI_CHARTS_THEME_LIGHT;
+  const chartBaseTheme = useChartBaseTheme();
 
   const sliceOrderRadiosIdPrefix = 'colorType';
   const sliceOrderRadios = [
@@ -146,7 +136,8 @@ export default () => {
       <div style={{ position: 'relative' }}>
         <Chart size={{ height: 200 }}>
           <Settings
-            theme={[themeOverrides, euiChartTheme.theme]}
+            baseTheme={chartBaseTheme}
+            theme={themeOverrides}
             showLegend={showLegend}
             showLegendExtra
           />
@@ -162,7 +153,7 @@ export default () => {
                 groupByRollup: (d: (typeof BROWSER_DATA_2019)[0]) => d.browser,
                 shape: {
                   fillColor: (_, sortIndex) =>
-                    euiChartTheme.theme.colors!.vizColors![sortIndex],
+                    chartBaseTheme.colors.vizColors![sortIndex],
                 },
               },
             ]}
@@ -274,7 +265,8 @@ export default () => {
 </EuiTitle>
 <Chart size={{ height: 200 }}>
   <Settings${showLegend ? '\nshowLegend' : ''}
-    theme={[themeOverrides, euiChartTheme.theme]}
+    baseTheme={chartBaseTheme}
+    theme={themeOverrides}
   />
   <Partition
     id={chartID}
@@ -300,7 +292,7 @@ export default () => {
       {
         groupByRollup: d => d.browser,
         shape: {
-          fillColor: (key, sortIndex) => euiChartTheme.theme.colors.vizColors[sortIndex],
+          fillColor: (key, sortIndex) => chartBaseTheme.colors.vizColors[sortIndex],
         },
       },
     ]}
diff --git a/src-docs/src/views/elastic_charts/sizes.tsx b/src-docs/src/views/elastic_charts/sizes.tsx
index ad91b65a1d2..7562d696d17 100644
--- a/src-docs/src/views/elastic_charts/sizes.tsx
+++ b/src-docs/src/views/elastic_charts/sizes.tsx
@@ -13,13 +13,10 @@ import {
   LineAnnotation,
   BarSeries,
   type PointerValue,
+  DARK_THEME,
+  LIGHT_THEME,
 } from '@elastic/charts';
 
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../src/themes/charts/themes';
-
 import {
   EuiSpacer,
   EuiTitle,
@@ -168,14 +165,8 @@ class Sizes extends Component<WithEuiThemeProps, State> {
       yAxisStyle,
       changeDescription,
     } = this.state;
-
     const isDarkTheme = this.props.theme.colorMode === 'DARK';
-    const theme = isDarkTheme
-      ? EUI_CHARTS_THEME_DARK.theme
-      : EUI_CHARTS_THEME_LIGHT.theme;
-    const lineAnnotationStyle = isDarkTheme
-      ? EUI_CHARTS_THEME_DARK.lineAnnotation
-      : EUI_CHARTS_THEME_LIGHT.lineAnnotation;
+    const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
 
     let annotation;
     if (width < this.xsmallSize) {
@@ -185,7 +176,6 @@ class Sizes extends Component<WithEuiThemeProps, State> {
           domainType="yDomain"
           dataValues={[{ dataValue: 22, details: 'Threshold' }]}
           marker={'22'}
-          style={lineAnnotationStyle}
         />
       );
     }
@@ -210,7 +200,7 @@ class Sizes extends Component<WithEuiThemeProps, State> {
 
             <Chart size={{ height: 200 }}>
               <Settings
-                theme={theme}
+                baseTheme={chartBaseTheme}
                 showLegend={multi}
                 legendPosition={legendPosition}
               />
@@ -302,11 +292,11 @@ class Sizes extends Component<WithEuiThemeProps, State> {
 
 <Chart size={{height: 200}}>
   <Settings
-    theme={isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme}
+    baseTheme={isDarkTheme ? DARK_THEME : LIGHT_THEME}
     showLegend={${multi}}
     legendPosition="${legendPosition}"
   />
-  <Tooltip 
+  <Tooltip
     headerFormatter={(tooltipData) => {
       return \`\${formatDate(
         tooltipData.value,
@@ -339,10 +329,6 @@ class Sizes extends Component<WithEuiThemeProps, State> {
     domainType="yDomain"
     dataValues={[{ dataValue: 1.2, details: 'Threshold' }]}
     marker={'1.2'}
-    style={isDarkTheme
-      ? EUI_CHARTS_THEME_DARK.lineAnnotation
-      : EUI_CHARTS_THEME_LIGHT.lineAnnotation
-    }
   />`
       : ''
   }
diff --git a/src-docs/src/views/elastic_charts/sparklines.tsx b/src-docs/src/views/elastic_charts/sparklines.tsx
index 95159a38ec1..55efb9e8173 100644
--- a/src-docs/src/views/elastic_charts/sparklines.tsx
+++ b/src-docs/src/views/elastic_charts/sparklines.tsx
@@ -9,11 +9,7 @@ import {
   AreaSeries,
 } from '@elastic/charts';
 
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-  EUI_SPARKLINE_THEME_PARTIAL,
-} from '../../../../src/themes/charts/themes';
+import { EUI_SPARKLINE_THEME_PARTIAL } from '../../../../src/themes/charts/themes';
 
 import {
   EuiPanel,
@@ -30,6 +26,7 @@ import {
   euiPaletteForLightBackground,
   useEuiTheme,
 } from '../../../../src/services';
+import { useChartBaseTheme } from './utils/use_chart_base_theme';
 
 export const TIME_DATA_SMALL = [
   [1551438630000, 8.515625],
@@ -49,14 +46,10 @@ TIME_DATA_MAJOR[lastIndex] = [...TIME_DATA_MAJOR[lastIndex]];
 TIME_DATA_MAJOR[lastIndex][1] = -100;
 
 export default () => {
+  const chartBaseTheme = useChartBaseTheme();
   const { colorMode } = useEuiTheme();
   const isDarkTheme = colorMode === 'DARK';
 
-  const theme = [
-    EUI_SPARKLINE_THEME_PARTIAL,
-    isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme,
-  ];
-
   return (
     <>
       <EuiFlexGrid columns={4} responsive={false}>
@@ -65,7 +58,11 @@ export default () => {
             <EuiStat title="" description="Number of things" textAlign="right">
               <EuiSpacer size="s" />
               <Chart size={{ height: 64 }}>
-                <Settings theme={theme} showLegend={false} />
+                <Settings
+                  baseTheme={chartBaseTheme}
+                  theme={EUI_SPARKLINE_THEME_PARTIAL}
+                  showLegend={false}
+                />
                 <Tooltip type="none" />
                 <BarSeries
                   id="numbers"
@@ -92,7 +89,11 @@ export default () => {
             >
               <EuiSpacer size="s" />
               <Chart size={{ height: 48 }}>
-                <Settings theme={theme} showLegend={false} />
+                <Settings
+                  baseTheme={chartBaseTheme}
+                  theme={EUI_SPARKLINE_THEME_PARTIAL}
+                  showLegend={false}
+                />
                 <Tooltip type="none" />
                 <LineSeries
                   id="increase"
@@ -127,7 +128,11 @@ export default () => {
             >
               <EuiSpacer size="s" />
               <Chart size={{ height: 16 }}>
-                <Settings theme={theme} showLegend={false} />
+                <Settings
+                  baseTheme={chartBaseTheme}
+                  theme={EUI_SPARKLINE_THEME_PARTIAL}
+                  showLegend={false}
+                />
                 <Tooltip type="none" />
                 <LineSeries
                   id="major"
@@ -154,7 +159,11 @@ export default () => {
             >
               <EuiSpacer size="s" />
               <Chart size={{ height: 48 }}>
-                <Settings theme={theme} showLegend={false} />
+                <Settings
+                  baseTheme={chartBaseTheme}
+                  theme={EUI_SPARKLINE_THEME_PARTIAL}
+                  showLegend={false}
+                />
                 <Tooltip type="none" />
                 <AreaSeries
                   id="subtle"
diff --git a/src-docs/src/views/elastic_charts/sparklines_example.js b/src-docs/src/views/elastic_charts/sparklines_example.js
index a1fdf1cf090..380dd7c9e9b 100644
--- a/src-docs/src/views/elastic_charts/sparklines_example.js
+++ b/src-docs/src/views/elastic_charts/sparklines_example.js
@@ -49,9 +49,18 @@ export const ElasticChartsSparklinesExample = {
             sparklines.
           </p>
           <EuiCodeBlock language="javascript" isCopyable>
-            {`import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT, EUI_SPARKLINE_THEME_PARTIAL } from \'@elastic/eui/dist/eui_charts_theme\';
-const euiTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme;
-<Settings theme={[EUI_SPARKLINE_THEME_PARTIAL, euiTheme]} />`}
+            {`import { DARK_THEME, LIGHT_THEME } from '@elastic/charts';
+
+const MyChart = () => {
+  const sparklineOverrides = chartsPlugin.theme.useSparklineOverrides(); // requires kibana charts plugin
+  const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
+  return (
+    <Chart>
+      <Settings baseTheme={chartBaseTheme} theme={sparklineOverrides} />
+      //...
+    </Chart>
+  );
+};`}
           </EuiCodeBlock>
           <p>
             <strong>Other key configurations</strong>
diff --git a/src-docs/src/views/elastic_charts/texture.tsx b/src-docs/src/views/elastic_charts/texture.tsx
index 63500bd13be..7b5728f00e2 100644
--- a/src-docs/src/views/elastic_charts/texture.tsx
+++ b/src-docs/src/views/elastic_charts/texture.tsx
@@ -8,12 +8,9 @@ import {
   Position,
 } from '@elastic/charts';
 
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../src/themes/charts/themes';
 import { EuiSpacer, EuiTitle } from '../../../../src/components';
-import { htmlIdGenerator, useEuiTheme } from '../../../../src/services';
+import { htmlIdGenerator } from '../../../../src/services';
+import { useChartBaseTheme } from './utils/use_chart_base_theme';
 
 export const SAMPLE_SMALL_DATA = [
   { x: 0, y: 10.934269 },
@@ -42,13 +39,7 @@ export const SAMPLE_SMALL_DATA_2 = [
 
 export default () => {
   const id = htmlIdGenerator()();
-
-  /**
-   * Setup theme based on current light/dark theme
-   */
-  const { colorMode } = useEuiTheme();
-  const euiChartTheme =
-    colorMode === 'DARK' ? EUI_CHARTS_THEME_DARK : EUI_CHARTS_THEME_LIGHT;
+  const chartBaseTheme = useChartBaseTheme();
 
   return (
     <>
@@ -59,7 +50,7 @@ export default () => {
       <EuiSpacer size="s" />
       <Chart size={{ height: 200 }}>
         <Settings
-          theme={euiChartTheme.theme}
+          baseTheme={chartBaseTheme}
           ariaLabelledBy={id}
           ariaDescription="This chart has two series with texture fills. The bar series has squares and the area series is comprised of circles."
           ariaUseDefaultSummary={false}
diff --git a/src-docs/src/views/elastic_charts/theming.tsx b/src-docs/src/views/elastic_charts/theming.tsx
index 3b6da67a52c..1e696b4362a 100644
--- a/src-docs/src/views/elastic_charts/theming.tsx
+++ b/src-docs/src/views/elastic_charts/theming.tsx
@@ -16,11 +16,6 @@ import {
   EuiColorPalettePicker,
 } from '../../../../src/components';
 
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../src/themes/charts/themes';
-
 import {
   euiPaletteColorBlind,
   euiPaletteComplementary,
@@ -31,8 +26,8 @@ import {
   euiPaletteRed,
   euiPaletteGreen,
   euiPaletteGray,
-  useEuiTheme,
 } from '../../../../src/services';
+import { useChartBaseTheme } from './utils/use_chart_base_theme';
 
 const paletteData = {
   euiPaletteColorBlind,
@@ -59,7 +54,7 @@ const palettes = Object.entries(paletteData).map(([paletteName, palette]) => {
 });
 
 export default () => {
-  const { colorMode } = useEuiTheme();
+  const chartBaseTheme = useChartBaseTheme();
 
   const [barPalette, setBarPalette] = useState('euiPaletteColorBlind');
 
@@ -70,15 +65,7 @@ export default () => {
   const data1 = dg.generateGroupedSeries(20, 1);
   const data2 = dg.generateGroupedSeries(20, 5);
 
-  /**
-   * Setup theme based on current light/dark theme
-   */
-  const isDarkTheme = colorMode === 'DARK';
-  const theme = isDarkTheme
-    ? EUI_CHARTS_THEME_DARK.theme
-    : EUI_CHARTS_THEME_LIGHT.theme;
-
-  const customTheme =
+  const themeOverrides =
     barPalette !== 'euiPaletteColorBlind'
       ? [
           {
@@ -86,14 +73,17 @@ export default () => {
               vizColors: paletteData[barPalette as keyof typeof paletteData](5),
             },
           },
-          theme,
         ]
-      : theme;
+      : [];
 
   return (
     <>
       <Chart size={{ height: 200 }}>
-        <Settings theme={customTheme} showLegend={false} />
+        <Settings
+          baseTheme={chartBaseTheme}
+          theme={themeOverrides}
+          showLegend={false}
+        />
         <BarSeries
           id="status"
           name="Status"
diff --git a/src-docs/src/views/elastic_charts/theming_categorical.tsx b/src-docs/src/views/elastic_charts/theming_categorical.tsx
index ca5f4bdc07c..6b4932d54a9 100644
--- a/src-docs/src/views/elastic_charts/theming_categorical.tsx
+++ b/src-docs/src/views/elastic_charts/theming_categorical.tsx
@@ -1,11 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Chart, Settings, Axis, DataGenerator } from '@elastic/charts';
 
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../src/themes/charts/themes';
-
 import {
   EuiSpacer,
   EuiFlexGrid,
@@ -27,12 +22,12 @@ import {
   euiPaletteGreen,
   euiPaletteForStatus,
   euiPaletteGray,
-  useEuiTheme,
 } from '../../../../src/services';
 import type { EuiPalette } from '../../../../src/services/color/eui_palettes';
+import { useChartBaseTheme } from './utils/use_chart_base_theme';
 
 export default () => {
-  const { colorMode } = useEuiTheme();
+  const chartBaseTheme = useChartBaseTheme();
   const highlightColor = euiPaletteColorBlind()[2];
 
   const idPrefix = 'colorType';
@@ -74,11 +69,6 @@ export default () => {
     createCategoryChart(3);
   }, []);
 
-  const isDarkTheme = colorMode === 'DARK';
-  const theme = isDarkTheme
-    ? EUI_CHARTS_THEME_DARK.theme
-    : EUI_CHARTS_THEME_LIGHT.theme;
-
   const updateCorrectChart = (numCharts: number, chartType: string) => {
     switch (chartType) {
       case 'Categorical':
@@ -213,20 +203,13 @@ export default () => {
       </EuiTitle>
     ) : undefined;
 
-  const customTheme = vizColors
+  const themeOverrides = vizColors
     ? [
         {
           colors: { vizColors },
         },
-        theme,
       ]
-    : theme;
-  const customColorsString = vizColors
-    ? `[
-  { colors: { vizColors: ${vizColorsString} }},
-  isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme
-]`
-    : 'isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme';
+    : [];
 
   const charts = [];
   let customLegend;
@@ -307,7 +290,8 @@ export default () => {
       <div style={{ position: 'relative' }}>
         <Chart size={{ height: 200 }}>
           <Settings
-            theme={customTheme}
+            baseTheme={chartBaseTheme}
+            theme={themeOverrides}
             showLegend={showLegend}
             legendPosition="right"
             showLegendExtra={false}
@@ -425,7 +409,14 @@ export default () => {
           }
 <Chart size={{height: 200}}>
   <Settings
-    theme={${customColorsString}}
+    baseTheme={isDarkTheme ? DARK_THEME : LIGHT_THEME}${`${
+      vizColors
+        ? `
+    theme={[
+      { colors: { vizColors: ${vizColorsString} }},
+    ]}`
+        : ''
+    }`}
     showLegend={${showLegend}}
     legendPosition="right"
     showLegendExtra={false}
diff --git a/src-docs/src/views/elastic_charts/theming_example.js b/src-docs/src/views/elastic_charts/theming_example.js
index 915b7cdb661..62e17f3d447 100644
--- a/src-docs/src/views/elastic_charts/theming_example.js
+++ b/src-docs/src/views/elastic_charts/theming_example.js
@@ -55,11 +55,11 @@ export const ElasticChartsThemingExample = {
             and pass the correct one to the Settings.theme property.
           </p>
           <EuiCodeBlock language="javascript" isCopyable fontSize="s">
-            {`import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
+            {`import { DARK_THEME, LIGHT_THEME } from '@elastic/charts';
 
-const euiTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme;
+const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
 
-<Settings theme={euiTheme} />`}
+<Settings baseTheme={chartBaseTheme} />`}
           </EuiCodeBlock>
           <EuiCallOut title="Kibana engineers" iconType="logoKibana">
             <p>
@@ -88,15 +88,23 @@ const euiTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LI
           </p>
 
           <EuiCodeBlock language="javascript" isCopyable fontSize="s">
-            {`import { euiPaletteGreen } from '../../../../src/services';
+            {`import { DARK_THEME, LIGHT_THEME } from '@elastic/charts';
+import { euiPaletteGreen } from '../../../../src/services';
 
-const customColors = {
-  colors: {
-    vizColors: euiPaletteGreen(5),
-  },
-};
-
-<Settings theme={[customColors, euiTheme]} />`}
+const MyChart = () => {
+  const customColors = {
+    colors: {
+      vizColors: euiPaletteGreen(5),
+    },
+  };
+  const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
+  return (
+    <Chart>
+      <Settings baseTheme={chartBaseTheme} theme={customColors} />
+      //...
+    </Chart>
+  );
+};`}
           </EuiCodeBlock>
           <p>You&apos;ll find an example of these in the demo below.</p>
         </>
diff --git a/src-docs/src/views/elastic_charts/time_chart.tsx b/src-docs/src/views/elastic_charts/time_chart.tsx
index 7b325b442f0..2c5a1603547 100644
--- a/src-docs/src/views/elastic_charts/time_chart.tsx
+++ b/src-docs/src/views/elastic_charts/time_chart.tsx
@@ -11,11 +11,6 @@ import {
   LineSeries,
 } from '@elastic/charts';
 
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../src/themes/charts/themes';
-
 import {
   EuiSpacer,
   EuiTitle,
@@ -25,11 +20,7 @@ import {
   EuiButton,
 } from '../../../../src/components';
 
-import {
-  formatDate,
-  dateFormatAliases,
-  useEuiTheme,
-} from '../../../../src/services';
+import { formatDate, dateFormatAliases } from '../../../../src/services';
 
 import { TIME_DATA, TIME_DATA_2 } from './data';
 import {
@@ -39,19 +30,15 @@ import {
   MultiChartCard,
   ChartCard,
 } from './shared';
+import { useChartBaseTheme } from './utils/use_chart_base_theme';
 
 export default () => {
-  const { colorMode } = useEuiTheme();
+  const chartBaseTheme = useChartBaseTheme();
 
   const [multi, setMulti] = useState(false);
   const [stacked, setStacked] = useState(false);
   const [chartType, setChartType] = useState<ChartType | 'Mixed'>('BarSeries');
 
-  const isDarkTheme = colorMode === 'DARK';
-  const theme = isDarkTheme
-    ? EUI_CHARTS_THEME_DARK.theme
-    : EUI_CHARTS_THEME_LIGHT.theme;
-
   const ChartType =
     chartType === 'Mixed' ? BarSeries : CHART_COMPONENTS[chartType];
   const ChartType2 =
@@ -71,7 +58,11 @@ export default () => {
       <EuiSpacer size="s" />
 
       <Chart size={{ height: 200 }}>
-        <Settings theme={theme} showLegend={multi} legendPosition="right" />
+        <Settings
+          baseTheme={chartBaseTheme}
+          showLegend={multi}
+          legendPosition="right"
+        />
         <Tooltip type="cross" />
         <ChartType
           id="financial"
@@ -143,7 +134,7 @@ export default () => {
         <EuiCopy
           textToCopy={`<Chart size={{height: 200}}>
   <Settings
-    theme={isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme}
+    baseTheme={isDarkTheme ? DARK_THEME : LIGHT_THEME}
     showLegend={${multi}}
     ${multi ? 'legendPosition="right"' : ''}
   />
diff --git a/src-docs/src/views/elastic_charts/treemap.tsx b/src-docs/src/views/elastic_charts/treemap.tsx
index 0a1728e6015..91b9732541a 100644
--- a/src-docs/src/views/elastic_charts/treemap.tsx
+++ b/src-docs/src/views/elastic_charts/treemap.tsx
@@ -1,29 +1,21 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 
 import { Chart, Partition, Settings, PartitionLayout } from '@elastic/charts';
 
-import {
-  EUI_CHARTS_THEME_DARK,
-  EUI_CHARTS_THEME_LIGHT,
-} from '../../../../src/themes/charts/themes';
 import {
   EuiFlexGrid,
   EuiFlexItem,
   EuiTitle,
   EuiSpacer,
 } from '../../../../src/components';
-import { euiPaletteColorBlind, useEuiTheme } from '../../../../src/services';
+import { euiPaletteColorBlind } from '../../../../src/services';
 
 import { GITHUB_DATASET_MOD } from './data';
+import { useChartBaseTheme } from './utils/use_chart_base_theme';
 type DataType = (typeof GITHUB_DATASET_MOD)[0];
 
 export default () => {
-  const { colorMode } = useEuiTheme();
-
-  /**
-   * Setup theme based on current light/dark theme
-   */
-  const isDarkTheme = colorMode === 'DARK';
+  const chartBaseTheme = useChartBaseTheme();
 
   /**
    * Create a 3 rotation palette (one for each level)
@@ -34,11 +26,6 @@ export default () => {
     sortBy: 'natural',
   });
 
-  const euiChartTheme = useMemo(
-    () => (isDarkTheme ? EUI_CHARTS_THEME_DARK : EUI_CHARTS_THEME_LIGHT),
-    [isDarkTheme]
-  );
-
   return (
     <>
       <EuiTitle className="eui-textCenter" size="xs">
@@ -49,7 +36,7 @@ export default () => {
         <EuiFlexItem>
           <Chart size={{ height: 240 }}>
             <Settings
-              theme={euiChartTheme.theme}
+              baseTheme={chartBaseTheme}
               showLegend
               legendMaxDepth={2}
             />
@@ -62,7 +49,7 @@ export default () => {
                 {
                   groupByRollup: (d: DataType) => d.total,
                   shape: {
-                    fillColor: euiChartTheme.theme.partition!.sectorLineStroke!,
+                    fillColor: chartBaseTheme.partition.sectorLineStroke!,
                   },
                 },
                 {
@@ -87,7 +74,7 @@ export default () => {
         <EuiFlexItem>
           <Chart size={{ height: 240 }}>
             <Settings
-              theme={euiChartTheme.theme}
+              baseTheme={chartBaseTheme}
               showLegend
               legendMaxDepth={1}
             />
diff --git a/src-docs/src/views/elastic_charts/utils/use_chart_base_theme.ts b/src-docs/src/views/elastic_charts/utils/use_chart_base_theme.ts
new file mode 100644
index 00000000000..74040c41add
--- /dev/null
+++ b/src-docs/src/views/elastic_charts/utils/use_chart_base_theme.ts
@@ -0,0 +1,11 @@
+import { DARK_THEME, LIGHT_THEME, Theme } from '@elastic/charts';
+import { useEuiTheme } from '../../../../../src/services';
+
+/**
+ * Returns base chart theme per current theme (aka `colorMode`)
+ */
+export const useChartBaseTheme = (): Theme => {
+  const { colorMode } = useEuiTheme();
+  const isDarkTheme = colorMode === 'DARK';
+  return isDarkTheme ? DARK_THEME : LIGHT_THEME;
+};
diff --git a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
index d5cfda19d01..b1e1bcb4a19 100644
--- a/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
+++ b/src-docs/src/views/markdown_editor/markdown_editor_with_plugins.js
@@ -6,13 +6,10 @@ import {
   Axis,
   BarSeries,
   DataGenerator,
+  LIGHT_THEME,
+  DARK_THEME,
 } from '@elastic/charts';
 
-import {
-  EUI_CHARTS_THEME_LIGHT,
-  EUI_CHARTS_THEME_DARK,
-} from '../../../../src/themes/charts/themes';
-
 import {
   getDefaultEuiMarkdownParsingPlugins,
   getDefaultEuiMarkdownProcessingPlugins,
@@ -235,6 +232,7 @@ function ChartMarkdownParser() {
 // receives the configuration from the parser and renders
 const ChartMarkdownRenderer = ({ palette, categories }) => {
   const { colorMode } = useEuiTheme();
+  const chartBaseTheme = colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME;
   const customColors = {
     colors: {
       vizColors: paletteData[paletteNames[palette - 1]](categories),
@@ -243,12 +241,8 @@ const ChartMarkdownRenderer = ({ palette, categories }) => {
   return (
     <Chart size={{ height: 320 }}>
       <Settings
-        theme={[
-          customColors,
-          colorMode === 'DARK'
-            ? EUI_CHARTS_THEME_DARK.theme
-            : EUI_CHARTS_THEME_LIGHT.theme,
-        ]}
+        baseTheme={chartBaseTheme}
+        theme={[customColors]}
         showLegend={false}
         showLegendDisplayValue={false}
       />
diff --git a/src/themes/charts/theme.scss b/src/themes/charts/theme.scss
deleted file mode 100644
index 348ea06d11f..00000000000
--- a/src/themes/charts/theme.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// There should be a good default in EC too
-.echAnnotation {
-  font-size: $euiFontSizeXS;
-  font-weight: $euiFontWeightBold;
-}
diff --git a/src/themes/charts/themes.ts b/src/themes/charts/themes.ts
index 61a1100965d..7df6c42e2ca 100644
--- a/src/themes/charts/themes.ts
+++ b/src/themes/charts/themes.ts
@@ -24,6 +24,9 @@ export interface EuiChartThemeType {
 
 function createTheme(colors: any): EuiChartThemeType {
   return {
+    /**
+     * @deprecated use `<DARK|LIGHT>_THEME.lineAnnotation` theme from `@elastic/charts`
+     */
     lineAnnotation: {
       line: {
         strokeWidth: 1,
@@ -31,6 +34,9 @@ function createTheme(colors: any): EuiChartThemeType {
         opacity: 1,
       },
     },
+    /**
+     * @deprecated use `<DARK|LIGHT>_THEME` theme from `@elastic/charts`
+     */
     theme: {
       background: {
         color: colors.emptyShade,
@@ -206,18 +212,27 @@ const builtTheme = buildTheme({}, KEY) as typeof EuiThemeAmsterdam;
 const lightColors = getComputed(EuiThemeAmsterdam, builtTheme, 'LIGHT').colors;
 const darkColors = getComputed(EuiThemeAmsterdam, builtTheme, 'DARK').colors;
 
+/**
+ * @deprecated use `LIGHT_THEME`  & `LIGHT_THEME.lineAnnotation`
+ */
 export const EUI_CHARTS_THEME_LIGHT: EuiChartThemeType = createTheme({
   ...lightColors,
   chartLines: shade(lightColors.lightestShade, 0.03),
   chartBand: lightColors.lightestShade,
 });
 
+/**
+ * @deprecated use `DARK_THEME` & `DARK_THEME.lineAnnotation` theme from `@elastic/charts`
+ */
 export const EUI_CHARTS_THEME_DARK: EuiChartThemeType = createTheme({
   ...darkColors,
   chartLines: darkColors.lightShade,
   chartBand: tint(darkColors.lightestShade, 0.025),
 });
 
+/**
+ * @deprecated use `useSparklineOverrides` hook from the kibana `charts` plugin `theme` service
+ */
 export const EUI_SPARKLINE_THEME_PARTIAL: PartialTheme = {
   lineSeriesStyle: {
     point: {
diff --git a/yarn.lock b/yarn.lock
index 7e14a56ee79..c01f629af31 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2096,10 +2096,10 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
-"@elastic/charts@^64.0.2":
-  version "64.0.2"
-  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-64.0.2.tgz#3df497aad0dd2e8df7221a08e21d0b72daee5d36"
-  integrity sha512-cSW44eorH+Ih0YOliLdLamYi30RXQppAIuc4/NzG9JkUFufkAIN5qOgY5qW3gU0WfsbY+GIVUZSB4xh/Zsw1Ug==
+"@elastic/charts@^64.1.0":
+  version "64.1.0"
+  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-64.1.0.tgz#aa52332cec68ea52be25e387774267027311b8ca"
+  integrity sha512-jZ9fnujjzHd24m0Fv5zURbxrb/MzIRUwlvyocjAn/y2yLHhlqMK6XWHfMoqIAgZ0iVVojfEPXnnc34PPT4KDIA==
   dependencies:
     "@popperjs/core" "^2.11.8"
     bezier-easing "^2.1.0"
@@ -20267,7 +20267,7 @@ string-template@~0.2.1:
   resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"
   integrity sha1-QpMuWYo1LQH8IuwzZ9nYTuxsmt0=
 
-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -20294,15 +20294,6 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.2.2, string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
 string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
@@ -20456,7 +20447,7 @@ stringify-entities@^3.0.1:
     is-decimal "^1.0.2"
     is-hexadecimal "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -20484,13 +20475,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2"
@@ -22609,7 +22593,7 @@ worker-farm@^1.7.0:
   dependencies:
     errno "~0.1.7"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -22644,15 +22628,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.0.1.tgz#2101e861777fec527d0ea90c57c6b03aac56a5b3"