diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index b526ad4b5a..415b681b1b 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -46,10 +46,9 @@
 <!-- Delete any items that are not applicable to this PR. -->
 - [ ] The proper **chart type** label has been added (e.g. `:xy`, `:partition`)
 - [ ] The proper **feature** labels have been added (e.g. `:interactions`, `:axis`)
-- [ ] The `:theme` label has been added and the `@elastic/eui-team` team has been pinged when there are `Theme` API changes
 - [ ] All related issues have been linked (i.e. `closes #123`, `fixes #123`)
 - [ ] New public API exports have been added to `packages/charts/src/index.ts`
 - [ ] Unit tests have been added or updated to match the most common scenarios
 - [ ] The proper documentation and/or storybook story has been added or updated
 - [ ] The code has been checked for cross-browser compatibility (Chrome, Firefox, Safari, Edge)
-- [ ] Visual changes have been tested with all available themes including `dark`, `light`, `eui-dark` & `eui-light`
+- [ ] Visual changes have been tested with `light` and `dark` themes
diff --git a/e2e/helpers.ts b/e2e/helpers.ts
index 5a2406731a..47d3717381 100644
--- a/e2e/helpers.ts
+++ b/e2e/helpers.ts
@@ -122,7 +122,7 @@ interface EachThemeCbParams {
   urlParam: string;
 }
 
-export const themeIds = ['light', 'dark', 'eui-light', 'eui-dark'];
+export const themeIds = ['light', 'dark'];
 
 /**
  * This is a wrapper around it.each for Themes
diff --git a/e2e_server/server/mocks/use_global_parameters.ts b/e2e_server/server/mocks/use_global_parameters.ts
index a215a49f19..fa249dc007 100644
--- a/e2e_server/server/mocks/use_global_parameters.ts
+++ b/e2e_server/server/mocks/use_global_parameters.ts
@@ -52,7 +52,7 @@ interface GlobalParameters {
 }
 
 export function useGlobalsParameters(): GlobalParameters {
-  const [themeId, setThemeId] = useState<string>(ThemeId.EUILight);
+  const [themeId, setThemeId] = useState<string>(ThemeId.Light);
   const [backgroundId, setBackgroundId] = useState<string | undefined>('white');
   const [togglesJSON, setTogglesJSON] = useState<string>('{}');
 
@@ -63,7 +63,7 @@ export function useGlobalsParameters(): GlobalParameters {
     const globals = getGlobalParams(params);
     const backgroundIdFromParams = globals.background ?? parameters?.background?.default ?? backgroundParams.default;
     setBackgroundId(backgroundIdFromParams);
-    const themeIdFromParams = globals.theme ?? parameters?.theme?.default ?? themeParams.default ?? ThemeId.EUILight;
+    const themeIdFromParams = globals.theme ?? parameters?.theme?.default ?? themeParams.default ?? ThemeId.Light;
     setThemeId(themeIdFromParams);
     setTogglesJSON(JSON.stringify(globals.toggles ?? '{}'));
     applyThemeCSS(themeIdFromParams);
diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md
index 15fc2b8631..9587d489af 100644
--- a/packages/charts/api/charts.api.md
+++ b/packages/charts/api/charts.api.md
@@ -1579,6 +1579,12 @@ export const LayoutDirection: Readonly<{
 // @public (undocumented)
 export type LayoutDirection = $Values<typeof LayoutDirection>;
 
+// @public @deprecated
+export const LEGACY_DARK_THEME: Theme;
+
+// @public @deprecated
+export const LEGACY_LIGHT_THEME: Theme;
+
 // @public
 export interface LegacyAnimationConfig {
     // @alpha (undocumented)
diff --git a/packages/charts/src/index.ts b/packages/charts/src/index.ts
index 60876526c0..4e2decdde5 100644
--- a/packages/charts/src/index.ts
+++ b/packages/charts/src/index.ts
@@ -75,6 +75,8 @@ export * from './utils/themes/theme';
 export * from './utils/themes/theme_common';
 export { LIGHT_THEME } from './utils/themes/light_theme';
 export { DARK_THEME } from './utils/themes/dark_theme';
+export { LEGACY_LIGHT_THEME } from './utils/themes/legacy_light_theme';
+export { LEGACY_DARK_THEME } from './utils/themes/legacy_dark_theme';
 
 // wordcloud
 export { WordcloudViewModel } from './chart_types/wordcloud/layout/types/viewmodel_types';
diff --git a/packages/charts/src/utils/themes/dark_theme.ts b/packages/charts/src/utils/themes/dark_theme.ts
index 3dfb1cd5fb..b677fcbc1c 100644
--- a/packages/charts/src/utils/themes/dark_theme.ts
+++ b/packages/charts/src/utils/themes/dark_theme.ts
@@ -8,14 +8,10 @@
 
 import { palettes } from './colors';
 import { Theme } from './theme';
-import {
-  DEFAULT_CHART_MARGINS,
-  DEFAULT_CHART_PADDING,
-  DEFAULT_GEOMETRY_STYLES,
-  DEFAULT_MISSING_COLOR,
-} from './theme_common';
+import { DEFAULT_CHART_MARGINS, DEFAULT_CHART_PADDING, DEFAULT_GEOMETRY_STYLES } from './theme_common';
 import { Colors } from '../../common/colors';
-import { GOLDEN_RATIO, TAU } from '../../common/constants';
+import { TAU } from '../../common/constants';
+import { DEFAULT_FONT_FAMILY } from '../../common/default_theme_attributes';
 import { ColorVariant } from '../common';
 
 /** @public */
@@ -25,15 +21,15 @@ export const DARK_THEME: Theme = {
   lineSeriesStyle: {
     line: {
       visible: true,
-      strokeWidth: 1,
+      strokeWidth: 2,
       opacity: 1,
     },
     point: {
       visible: true,
       stroke: ColorVariant.Series,
-      strokeWidth: 1,
-      fill: Colors.Black.keyword,
-      radius: 2,
+      strokeWidth: 2,
+      fill: '#1D1E24',
+      radius: 3,
       opacity: 1,
     },
     isolatedPoint: {
@@ -69,15 +65,15 @@ export const DARK_THEME: Theme = {
     },
     line: {
       visible: true,
-      strokeWidth: 1,
+      strokeWidth: 2,
       opacity: 1,
     },
     point: {
       visible: false,
       stroke: ColorVariant.Series,
-      strokeWidth: 1,
-      fill: Colors.Black.keyword,
-      radius: 2,
+      strokeWidth: 2,
+      fill: '#1D1E24',
+      radius: 3,
       opacity: 1,
     },
     isolatedPoint: {
@@ -111,11 +107,12 @@ export const DARK_THEME: Theme = {
       strokeWidth: 1,
     },
     displayValue: {
-      fontSize: 8,
+      fontSize: 10,
       fontStyle: 'normal',
-      fontFamily: 'sans-serif',
+      fontFamily: DEFAULT_FONT_FAMILY,
+      alignment: { horizontal: 'center', vertical: 'middle' },
       padding: 0,
-      fill: '#999',
+      fill: { textBorder: 0 },
       offsetX: 0,
       offsetY: 0,
     },
@@ -136,17 +133,17 @@ export const DARK_THEME: Theme = {
   axes: {
     axisTitle: {
       fontSize: 12,
-      fontFamily: 'sans-serif',
+      fontFamily: DEFAULT_FONT_FAMILY,
       padding: {
-        inner: 8,
+        inner: 10,
         outer: 0,
       },
-      fill: '#D4D4D4',
+      fill: '#DFE5EF',
       visible: true,
     },
     axisPanelTitle: {
       fontSize: 10,
-      fontFamily: 'sans-serif',
+      fontFamily: DEFAULT_FONT_FAMILY,
       padding: {
         inner: 8,
         outer: 0,
@@ -156,16 +153,16 @@ export const DARK_THEME: Theme = {
     },
     axisLine: {
       visible: true,
-      stroke: '#444',
+      stroke: '#343741',
       strokeWidth: 1,
     },
     tickLabel: {
       visible: true,
       fontSize: 10,
-      fontFamily: 'sans-serif',
+      fontFamily: DEFAULT_FONT_FAMILY,
       fontStyle: 'normal',
-      fill: '#999',
-      padding: 0,
+      fill: '#81858f',
+      padding: { outer: 8, inner: 10 },
       rotation: 0,
       offset: {
         x: 0,
@@ -178,33 +175,33 @@ export const DARK_THEME: Theme = {
       },
     },
     tickLine: {
-      visible: true,
-      stroke: '#444',
+      visible: false,
+      stroke: '#343741',
       strokeWidth: 1,
       size: 10,
       padding: 10,
     },
     gridLine: {
       horizontal: {
-        visible: false,
-        stroke: '#D3DAE6',
+        visible: true,
+        stroke: '#343741',
         strokeWidth: 1,
         opacity: 1,
         dash: [0, 0],
       },
       vertical: {
-        visible: false,
-        stroke: '#D3DAE6',
+        visible: true,
+        stroke: '#343741',
         strokeWidth: 1,
         opacity: 1,
-        dash: [0, 0],
+        dash: [4, 4],
       },
       lumaSteps: [63, 103, 159, 191, 223, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255],
     },
   },
   colors: {
     vizColors: palettes.echPaletteColorBlind.colors,
-    defaultVizColor: DEFAULT_MISSING_COLOR,
+    defaultVizColor: '#6092C0',
   },
   legend: {
     verticalWidth: 200,
@@ -217,24 +214,25 @@ export const DARK_THEME: Theme = {
   },
   crosshair: {
     band: {
-      fill: '#2A2A2A',
       visible: true,
+      fill: '#2a2b33',
     },
     line: {
-      stroke: '#999',
-      strokeWidth: 1,
       visible: true,
+      stroke: '#98A2B3',
+      strokeWidth: 1,
+      dash: [4, 4],
     },
     crossLine: {
-      stroke: '#999',
-      strokeWidth: 1,
-      dash: [5, 5],
       visible: true,
+      stroke: '#98A2B3',
+      strokeWidth: 1,
+      dash: [4, 4],
     },
   },
   background: {
-    color: 'transparent',
-    fallbackColor: Colors.Black.keyword,
+    color: '#1D1E24',
+    fallbackColor: '#1D1E24',
   },
   goal: {
     minFontSize: 8,
@@ -252,48 +250,48 @@ export const DARK_THEME: Theme = {
     capturePad: 16,
     tickLabel: {
       fontStyle: 'normal',
-      fontFamily: 'sans-serif',
-      fill: 'white',
+      fontFamily: DEFAULT_FONT_FAMILY,
+      fill: '#81858f',
     },
     majorLabel: {
       fontStyle: 'normal',
-      fontFamily: 'sans-serif',
-      fill: 'white',
+      fontFamily: DEFAULT_FONT_FAMILY,
+      fill: '#DFE5EF',
     },
     minorLabel: {
       fontStyle: 'normal',
-      fontFamily: 'sans-serif',
-      fill: 'white',
+      fontFamily: DEFAULT_FONT_FAMILY,
+      fill: '#81858f',
     },
     majorCenterLabel: {
       fontStyle: 'normal',
-      fontFamily: 'sans-serif',
-      fill: 'white',
+      fontFamily: DEFAULT_FONT_FAMILY,
+      fill: '#DFE5EF',
     },
     minorCenterLabel: {
       fontStyle: 'normal',
-      fontFamily: 'sans-serif',
-      fill: 'white',
+      fontFamily: DEFAULT_FONT_FAMILY,
+      fill: '#81858f',
     },
     targetLine: {
-      stroke: 'white',
+      stroke: '#D4DAE5',
     },
     tickLine: {
-      stroke: 'snow',
+      stroke: '#535966',
     },
     progressLine: {
-      stroke: 'white',
+      stroke: '#D4DAE5',
     },
   },
   partition: {
-    outerSizeRatio: 1 / GOLDEN_RATIO,
+    outerSizeRatio: 1,
     emptySizeRatio: 0,
-    fontFamily: 'Sans-Serif',
+    fontFamily: DEFAULT_FONT_FAMILY,
     minFontSize: 8,
     maxFontSize: 64,
     idealFontSizeJump: 1.05,
     maximizeFontSize: false,
-    circlePadding: 2,
+    circlePadding: 4,
     radialPadding: TAU / 360,
     horizontalTextAngleThreshold: TAU / 12,
     horizontalTextEnforcer: 1,
@@ -304,7 +302,7 @@ export const DARK_THEME: Theme = {
       fontVariant: 'normal',
       fontWeight: 400,
       valueFont: {
-        fontWeight: 400,
+        fontWeight: 700,
         fontStyle: 'normal',
         fontVariant: 'normal',
       },
@@ -314,7 +312,7 @@ export const DARK_THEME: Theme = {
     linkLabel: {
       maximumSection: 10,
       fontFamily: 'Sans-Serif',
-      fontSize: 12,
+      fontSize: 11,
       fontStyle: 'normal',
       fontVariant: 'normal',
       fontWeight: 400,
@@ -323,9 +321,9 @@ export const DARK_THEME: Theme = {
       horizontalStemLength: 10,
       radiusPadding: 10,
       lineWidth: 1,
-      maxCount: 36,
+      maxCount: 5,
       maxTextLength: 100,
-      textColor: ColorVariant.Adaptive,
+      textColor: '#DFE5EF',
       minimumStemLength: 0,
       stemAngle: TAU / 8,
       padding: 0,
@@ -335,8 +333,8 @@ export const DARK_THEME: Theme = {
         fontVariant: 'normal',
       },
     },
-    sectorLineWidth: 1,
-    sectorLineStroke: Colors.Black.keyword,
+    sectorLineWidth: 1.5,
+    sectorLineStroke: '#1D1E24',
   },
   heatmap: {
     brushArea: {
@@ -356,7 +354,7 @@ export const DARK_THEME: Theme = {
     xAxisLabel: {
       visible: true,
       fontSize: 12,
-      fontFamily: 'Sans-Serif',
+      fontFamily: DEFAULT_FONT_FAMILY,
       fontStyle: 'normal',
       textColor: Colors.White.keyword,
       fontVariant: 'normal',
@@ -368,7 +366,7 @@ export const DARK_THEME: Theme = {
       visible: true,
       width: 'auto',
       fontSize: 12,
-      fontFamily: 'Sans-Serif',
+      fontFamily: DEFAULT_FONT_FAMILY,
       fontStyle: 'normal',
       textColor: Colors.White.keyword,
       fontVariant: 'normal',
@@ -390,7 +388,7 @@ export const DARK_THEME: Theme = {
         maxWidth: 'fill',
         minFontSize: 8,
         maxFontSize: 12,
-        fontFamily: 'Sans-Serif',
+        fontFamily: DEFAULT_FONT_FAMILY,
         fontStyle: 'normal',
         textColor: Colors.White.keyword,
         fontVariant: 'normal',
diff --git a/packages/charts/src/utils/themes/legacy_dark_theme.ts b/packages/charts/src/utils/themes/legacy_dark_theme.ts
new file mode 100644
index 0000000000..c3a78bb89d
--- /dev/null
+++ b/packages/charts/src/utils/themes/legacy_dark_theme.ts
@@ -0,0 +1,447 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { palettes } from './colors';
+import { Theme } from './theme';
+import {
+  DEFAULT_CHART_MARGINS,
+  DEFAULT_CHART_PADDING,
+  DEFAULT_GEOMETRY_STYLES,
+  DEFAULT_MISSING_COLOR,
+} from './theme_common';
+import { Colors } from '../../common/colors';
+import { GOLDEN_RATIO, TAU } from '../../common/constants';
+import { ColorVariant } from '../common';
+
+/**
+ * Legacy dark chart theme to be removed at some point
+ *
+ * @public
+ * @deprecated Use new `DARK_THEME`
+ */
+export const LEGACY_DARK_THEME: Theme = {
+  chartPaddings: DEFAULT_CHART_PADDING,
+  chartMargins: DEFAULT_CHART_MARGINS,
+  lineSeriesStyle: {
+    line: {
+      visible: true,
+      strokeWidth: 1,
+      opacity: 1,
+    },
+    point: {
+      visible: true,
+      stroke: ColorVariant.Series,
+      strokeWidth: 1,
+      fill: Colors.Black.keyword,
+      radius: 2,
+      opacity: 1,
+    },
+    isolatedPoint: {
+      visible: true,
+      stroke: ColorVariant.Series,
+      strokeWidth: 1,
+      fill: Colors.Black.keyword,
+      radius: 2,
+      opacity: 1,
+    },
+    fit: {
+      line: {
+        visible: true,
+        dash: [5, 5],
+        stroke: ColorVariant.Series,
+        opacity: 1,
+      },
+    },
+  },
+  bubbleSeriesStyle: {
+    point: {
+      visible: true,
+      strokeWidth: 1,
+      fill: Colors.Black.keyword,
+      radius: 2,
+      opacity: 1,
+    },
+  },
+  areaSeriesStyle: {
+    area: {
+      visible: true,
+      opacity: 0.3,
+    },
+    line: {
+      visible: true,
+      strokeWidth: 1,
+      opacity: 1,
+    },
+    point: {
+      visible: false,
+      stroke: ColorVariant.Series,
+      strokeWidth: 1,
+      fill: Colors.Black.keyword,
+      radius: 2,
+      opacity: 1,
+    },
+    isolatedPoint: {
+      visible: true,
+      stroke: ColorVariant.Series,
+      strokeWidth: 1,
+      fill: Colors.Black.keyword,
+      radius: 2,
+      opacity: 1,
+    },
+    fit: {
+      line: {
+        visible: true,
+        dash: [5, 5],
+        stroke: ColorVariant.Series,
+        opacity: 1,
+      },
+      area: {
+        visible: true,
+        opacity: 0.15,
+        fill: ColorVariant.Series,
+      },
+    },
+  },
+  barSeriesStyle: {
+    rect: {
+      opacity: 1,
+    },
+    rectBorder: {
+      visible: false,
+      strokeWidth: 1,
+    },
+    displayValue: {
+      fontSize: 8,
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+      padding: 0,
+      fill: '#999',
+      offsetX: 0,
+      offsetY: 0,
+    },
+  },
+  arcSeriesStyle: {
+    arc: {
+      visible: true,
+      stroke: 'white',
+      strokeWidth: 1,
+      opacity: 1,
+    },
+  },
+  sharedStyle: DEFAULT_GEOMETRY_STYLES,
+  scales: {
+    barsPadding: 0.25,
+    histogramPadding: 0.05,
+  },
+  axes: {
+    axisTitle: {
+      fontSize: 12,
+      fontFamily: 'sans-serif',
+      padding: {
+        inner: 8,
+        outer: 0,
+      },
+      fill: '#D4D4D4',
+      visible: true,
+    },
+    axisPanelTitle: {
+      fontSize: 10,
+      fontFamily: 'sans-serif',
+      padding: {
+        inner: 8,
+        outer: 0,
+      },
+      fill: '#D4D4D4',
+      visible: true,
+    },
+    axisLine: {
+      visible: true,
+      stroke: '#444',
+      strokeWidth: 1,
+    },
+    tickLabel: {
+      visible: true,
+      fontSize: 10,
+      fontFamily: 'sans-serif',
+      fontStyle: 'normal',
+      fill: '#999',
+      padding: 0,
+      rotation: 0,
+      offset: {
+        x: 0,
+        y: 0,
+        reference: 'local',
+      },
+      alignment: {
+        vertical: 'near',
+        horizontal: 'near',
+      },
+    },
+    tickLine: {
+      visible: true,
+      stroke: '#444',
+      strokeWidth: 1,
+      size: 10,
+      padding: 10,
+    },
+    gridLine: {
+      horizontal: {
+        visible: false,
+        stroke: '#D3DAE6',
+        strokeWidth: 1,
+        opacity: 1,
+        dash: [0, 0],
+      },
+      vertical: {
+        visible: false,
+        stroke: '#D3DAE6',
+        strokeWidth: 1,
+        opacity: 1,
+        dash: [0, 0],
+      },
+      lumaSteps: [63, 103, 159, 191, 223, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255],
+    },
+  },
+  colors: {
+    vizColors: palettes.echPaletteColorBlind.colors,
+    defaultVizColor: DEFAULT_MISSING_COLOR,
+  },
+  legend: {
+    verticalWidth: 200,
+    horizontalHeight: 64,
+    spacingBuffer: 10,
+    margin: 0,
+    labelOptions: {
+      maxLines: 1,
+    },
+  },
+  crosshair: {
+    band: {
+      fill: '#2A2A2A',
+      visible: true,
+    },
+    line: {
+      stroke: '#999',
+      strokeWidth: 1,
+      visible: true,
+    },
+    crossLine: {
+      stroke: '#999',
+      strokeWidth: 1,
+      dash: [5, 5],
+      visible: true,
+    },
+  },
+  background: {
+    color: 'transparent',
+    fallbackColor: Colors.Black.keyword,
+  },
+  goal: {
+    minFontSize: 8,
+    maxFontSize: 64,
+    maxCircularSize: 360,
+    maxBulletSize: 500,
+    barThicknessMinSizeRatio: 1 / 10,
+    baselineArcThickness: 32,
+    baselineBarThickness: 32,
+    marginRatio: 0.05,
+    maxTickFontSize: 24,
+    maxLabelFontSize: 32,
+    maxCentralFontSize: 38,
+    arcBoxSamplePitch: (5 / 360) * TAU,
+    capturePad: 16,
+    tickLabel: {
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+      fill: 'white',
+    },
+    majorLabel: {
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+      fill: 'white',
+    },
+    minorLabel: {
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+      fill: 'white',
+    },
+    majorCenterLabel: {
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+      fill: 'white',
+    },
+    minorCenterLabel: {
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+      fill: 'white',
+    },
+    targetLine: {
+      stroke: 'white',
+    },
+    tickLine: {
+      stroke: 'snow',
+    },
+    progressLine: {
+      stroke: 'white',
+    },
+  },
+  partition: {
+    outerSizeRatio: 1 / GOLDEN_RATIO,
+    emptySizeRatio: 0,
+    fontFamily: 'Sans-Serif',
+    minFontSize: 8,
+    maxFontSize: 64,
+    idealFontSizeJump: 1.05,
+    maximizeFontSize: false,
+    circlePadding: 2,
+    radialPadding: TAU / 360,
+    horizontalTextAngleThreshold: TAU / 12,
+    horizontalTextEnforcer: 1,
+    fillLabel: {
+      textColor: ColorVariant.Adaptive,
+      fontFamily: 'Sans-Serif',
+      fontStyle: 'normal',
+      fontVariant: 'normal',
+      fontWeight: 400,
+      valueFont: {
+        fontWeight: 400,
+        fontStyle: 'normal',
+        fontVariant: 'normal',
+      },
+      padding: 2,
+      clipText: false,
+    },
+    linkLabel: {
+      maximumSection: 10,
+      fontFamily: 'Sans-Serif',
+      fontSize: 12,
+      fontStyle: 'normal',
+      fontVariant: 'normal',
+      fontWeight: 400,
+      gap: 10,
+      spacing: 2,
+      horizontalStemLength: 10,
+      radiusPadding: 10,
+      lineWidth: 1,
+      maxCount: 36,
+      maxTextLength: 100,
+      textColor: ColorVariant.Adaptive,
+      minimumStemLength: 0,
+      stemAngle: TAU / 8,
+      padding: 0,
+      valueFont: {
+        fontWeight: 400,
+        fontStyle: 'normal',
+        fontVariant: 'normal',
+      },
+    },
+    sectorLineWidth: 1,
+    sectorLineStroke: Colors.Black.keyword,
+  },
+  heatmap: {
+    brushArea: {
+      visible: true,
+      stroke: '#D3DAE6', // euiColorLightShade,
+      strokeWidth: 2,
+    },
+    brushMask: {
+      visible: true,
+      fill: '#8c8c8c80',
+    },
+    brushTool: {
+      visible: false,
+      fill: 'snow',
+    },
+
+    xAxisLabel: {
+      visible: true,
+      fontSize: 12,
+      fontFamily: 'Sans-Serif',
+      fontStyle: 'normal',
+      textColor: Colors.White.keyword,
+      fontVariant: 'normal',
+      fontWeight: 'normal',
+      padding: { top: 5, bottom: 5, left: 5, right: 5 },
+      rotation: 0,
+    },
+    yAxisLabel: {
+      visible: true,
+      width: 'auto',
+      fontSize: 12,
+      fontFamily: 'Sans-Serif',
+      fontStyle: 'normal',
+      textColor: Colors.White.keyword,
+      fontVariant: 'normal',
+      fontWeight: 'normal',
+      padding: { top: 5, bottom: 5, left: 5, right: 5 },
+    },
+    grid: {
+      stroke: {
+        width: 1,
+        color: 'snow',
+      },
+    },
+    cell: {
+      maxWidth: 'fill',
+      maxHeight: 'fill',
+      align: 'center',
+      label: {
+        visible: true,
+        maxWidth: 'fill',
+        minFontSize: 8,
+        maxFontSize: 12,
+        fontFamily: 'Sans-Serif',
+        fontStyle: 'normal',
+        textColor: Colors.White.keyword,
+        fontVariant: 'normal',
+        fontWeight: 'normal',
+        useGlobalMinFontSize: true,
+      },
+      border: {
+        strokeWidth: 1,
+        stroke: 'snow',
+      },
+    },
+  },
+  metric: {
+    text: {
+      lightColor: '#E0E5EE',
+      darkColor: '#343741',
+    },
+    border: '#343741',
+    barBackground: '#343741',
+    background: '#1D1E23',
+    nonFiniteText: 'N/A',
+    minHeight: 64,
+  },
+  tooltip: {
+    maxWidth: 260,
+    maxTableHeight: 120,
+    defaultDotColor: Colors.White.keyword,
+  },
+  flamegraph: {
+    navigation: {
+      textColor: 'rgb(223, 229, 239)',
+      buttonTextColor: 'rgb(54, 162, 239)',
+      buttonDisabledTextColor: 'rgb(81, 87, 97)',
+      buttonBackgroundColor: '#36a2ef33',
+      buttonDisabledBackgroundColor: 'rgba(52, 55, 65, 0.15)',
+    },
+    scrollbarThumb: 'rgb(223, 229, 239)',
+    scrollbarTrack: 'rgb(52, 55, 65)',
+  },
+  highlighter: {
+    point: {
+      opacity: 1,
+      fill: ColorVariant.None,
+      stroke: ColorVariant.Series,
+      strokeWidth: 4,
+      radius: 10,
+    },
+  },
+};
diff --git a/packages/charts/src/utils/themes/legacy_light_theme.ts b/packages/charts/src/utils/themes/legacy_light_theme.ts
new file mode 100644
index 0000000000..aee60ece81
--- /dev/null
+++ b/packages/charts/src/utils/themes/legacy_light_theme.ts
@@ -0,0 +1,446 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { palettes } from './colors';
+import { Theme } from './theme';
+import {
+  DEFAULT_CHART_MARGINS,
+  DEFAULT_CHART_PADDING,
+  DEFAULT_GEOMETRY_STYLES,
+  DEFAULT_MISSING_COLOR,
+} from './theme_common';
+import { Colors } from '../../common/colors';
+import { GOLDEN_RATIO, TAU } from '../../common/constants';
+import { ColorVariant } from '../common';
+
+/**
+ * Legacy light chart theme to be removed at some point
+ *
+ * @public
+ * @deprecated use new `LIGHT_THEME`
+ */
+export const LEGACY_LIGHT_THEME: Theme = {
+  chartPaddings: DEFAULT_CHART_PADDING,
+  chartMargins: DEFAULT_CHART_MARGINS,
+  lineSeriesStyle: {
+    line: {
+      visible: true,
+      strokeWidth: 1,
+      opacity: 1,
+    },
+    point: {
+      visible: true,
+      strokeWidth: 1,
+      stroke: ColorVariant.Series,
+      fill: Colors.White.keyword,
+      radius: 2,
+      opacity: 1,
+    },
+    isolatedPoint: {
+      visible: true,
+      stroke: ColorVariant.Series,
+      strokeWidth: 1,
+      fill: Colors.White.keyword,
+      radius: 2,
+      opacity: 1,
+    },
+    fit: {
+      line: {
+        opacity: 1,
+        visible: true,
+        dash: [5, 5],
+        stroke: ColorVariant.Series,
+      },
+    },
+  },
+  bubbleSeriesStyle: {
+    point: {
+      visible: true,
+      strokeWidth: 1,
+      fill: Colors.White.keyword,
+      radius: 2,
+      opacity: 1,
+    },
+  },
+  areaSeriesStyle: {
+    area: {
+      visible: true,
+      opacity: 0.3,
+    },
+    line: {
+      visible: true,
+      strokeWidth: 1,
+      opacity: 1,
+    },
+    point: {
+      visible: false,
+      stroke: ColorVariant.Series,
+      strokeWidth: 1,
+      fill: Colors.White.keyword,
+      radius: 2,
+      opacity: 1,
+    },
+    isolatedPoint: {
+      visible: true,
+      stroke: ColorVariant.Series,
+      strokeWidth: 1,
+      fill: Colors.White.keyword,
+      radius: 2,
+      opacity: 1,
+    },
+    fit: {
+      line: {
+        visible: true,
+        dash: [5, 5],
+        stroke: ColorVariant.Series,
+        opacity: 1,
+      },
+      area: {
+        visible: true,
+        opacity: 0.15,
+        fill: ColorVariant.Series,
+      },
+    },
+  },
+  barSeriesStyle: {
+    rect: {
+      opacity: 1,
+    },
+    rectBorder: {
+      visible: false,
+      strokeWidth: 1,
+    },
+    displayValue: {
+      fontSize: 8,
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+      padding: 0,
+      fill: '#777',
+      offsetX: 0,
+      offsetY: 0,
+    },
+  },
+  arcSeriesStyle: {
+    arc: {
+      visible: true,
+      stroke: Colors.Black.keyword,
+      strokeWidth: 1,
+      opacity: 1,
+    },
+  },
+  sharedStyle: DEFAULT_GEOMETRY_STYLES,
+  scales: {
+    barsPadding: 0.25,
+    histogramPadding: 0.05,
+  },
+  axes: {
+    axisTitle: {
+      visible: true,
+      fontSize: 12,
+      fontFamily: 'sans-serif',
+      padding: {
+        inner: 8,
+        outer: 0,
+      },
+      fill: '#333',
+    },
+    axisPanelTitle: {
+      visible: true,
+      fontSize: 10,
+      fontFamily: 'sans-serif',
+      padding: {
+        inner: 8,
+        outer: 0,
+      },
+      fill: '#333',
+    },
+    axisLine: {
+      visible: true,
+      stroke: '#eaeaea',
+      strokeWidth: 1,
+    },
+    tickLabel: {
+      visible: true,
+      fontSize: 10,
+      fontFamily: 'sans-serif',
+      fontStyle: 'normal',
+      fill: '#777',
+      padding: 0,
+      rotation: 0,
+      offset: {
+        x: 0,
+        y: 0,
+        reference: 'local',
+      },
+      alignment: {
+        vertical: 'near',
+        horizontal: 'near',
+      },
+    },
+    tickLine: {
+      visible: true,
+      stroke: '#eaeaea',
+      strokeWidth: 1,
+      size: 10,
+      padding: 10,
+    },
+    gridLine: {
+      horizontal: {
+        visible: false,
+        stroke: '#D3DAE6',
+        strokeWidth: 1,
+        opacity: 1,
+        dash: [0, 0],
+      },
+      vertical: {
+        visible: false,
+        stroke: '#D3DAE6',
+        strokeWidth: 1,
+        opacity: 1,
+        dash: [0, 0],
+      },
+      lumaSteps: [224, 184, 128, 96, 64, 32, 16, 8, 4, 2, 1, 0, 0, 0, 0, 0],
+    },
+  },
+  colors: {
+    vizColors: palettes.echPaletteColorBlind.colors,
+    defaultVizColor: DEFAULT_MISSING_COLOR,
+  },
+  legend: {
+    verticalWidth: 200,
+    horizontalHeight: 64,
+    spacingBuffer: 10,
+    margin: 0,
+    labelOptions: {
+      maxLines: 1,
+    },
+  },
+  crosshair: {
+    band: {
+      fill: '#F5F5F5',
+      visible: true,
+    },
+    line: {
+      stroke: '#98A2B3',
+      strokeWidth: 1,
+      visible: true,
+    },
+    crossLine: {
+      stroke: '#98A2B3',
+      strokeWidth: 1,
+      dash: [5, 5],
+      visible: true,
+    },
+  },
+  background: {
+    color: Colors.Transparent.keyword,
+    fallbackColor: Colors.White.keyword,
+  },
+  goal: {
+    minFontSize: 8,
+    maxFontSize: 64,
+    maxCircularSize: 360,
+    maxBulletSize: 500,
+    barThicknessMinSizeRatio: 1 / 10,
+    baselineArcThickness: 32,
+    baselineBarThickness: 32,
+    marginRatio: 0.05,
+    maxTickFontSize: 24,
+    maxLabelFontSize: 32,
+    maxCentralFontSize: 38,
+    arcBoxSamplePitch: (5 / 360) * TAU,
+    capturePad: 16,
+    tickLabel: {
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+      fill: Colors.Black.keyword,
+    },
+    majorLabel: {
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+      fill: Colors.Black.keyword,
+    },
+    minorLabel: {
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+      fill: Colors.Black.keyword,
+    },
+    majorCenterLabel: {
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+      fill: Colors.Black.keyword,
+    },
+    minorCenterLabel: {
+      fontStyle: 'normal',
+      fontFamily: 'sans-serif',
+      fill: Colors.Black.keyword,
+    },
+    targetLine: {
+      stroke: Colors.Black.keyword,
+    },
+    tickLine: {
+      stroke: 'darkgrey',
+    },
+    progressLine: {
+      stroke: Colors.Black.keyword,
+    },
+  },
+  partition: {
+    outerSizeRatio: 1 / GOLDEN_RATIO,
+    emptySizeRatio: 0,
+    fontFamily: 'Sans-Serif',
+    minFontSize: 8,
+    maxFontSize: 64,
+    idealFontSizeJump: 1.05,
+    maximizeFontSize: false,
+    circlePadding: 2,
+    radialPadding: TAU / 360,
+    horizontalTextAngleThreshold: TAU / 12,
+    horizontalTextEnforcer: 1,
+    fillLabel: {
+      textColor: ColorVariant.Adaptive,
+      fontFamily: 'Sans-Serif',
+      fontStyle: 'normal',
+      fontVariant: 'normal',
+      fontWeight: 400,
+      valueFont: {
+        fontWeight: 400,
+        fontStyle: 'normal',
+        fontVariant: 'normal',
+      },
+      padding: 2,
+      clipText: false,
+    },
+    linkLabel: {
+      maximumSection: 10,
+      fontFamily: 'Sans-Serif',
+      fontSize: 12,
+      fontStyle: 'normal',
+      fontVariant: 'normal',
+      fontWeight: 400,
+      gap: 10,
+      spacing: 2,
+      horizontalStemLength: 10,
+      radiusPadding: 10,
+      lineWidth: 1,
+      maxCount: 36,
+      maxTextLength: 100,
+      textColor: ColorVariant.Adaptive,
+      minimumStemLength: 0,
+      stemAngle: TAU / 8,
+      padding: 0,
+      valueFont: {
+        fontWeight: 400,
+        fontStyle: 'normal',
+        fontVariant: 'normal',
+      },
+    },
+    sectorLineWidth: 1,
+    sectorLineStroke: 'white',
+  },
+  heatmap: {
+    brushArea: {
+      visible: true,
+      stroke: '#69707D', // euiColorDarkShade,
+      strokeWidth: 2,
+    },
+    brushMask: {
+      visible: true,
+      fill: '#73737380',
+    },
+    brushTool: {
+      visible: false,
+      fill: 'gray',
+    },
+    xAxisLabel: {
+      visible: true,
+      fontSize: 12,
+      fontFamily: 'Sans-Serif',
+      fontStyle: 'normal',
+      textColor: Colors.Black.keyword,
+      fontVariant: 'normal',
+      fontWeight: 'normal',
+      padding: { top: 5, bottom: 5, left: 5, right: 5 },
+      rotation: 0,
+    },
+    yAxisLabel: {
+      visible: true,
+      width: 'auto',
+      fontSize: 12,
+      fontFamily: 'Sans-Serif',
+      fontStyle: 'normal',
+      textColor: Colors.Black.keyword,
+      fontVariant: 'normal',
+      fontWeight: 'normal',
+      padding: { top: 5, bottom: 5, left: 5, right: 5 },
+    },
+    grid: {
+      stroke: {
+        width: 1,
+        color: 'gray',
+      },
+    },
+    cell: {
+      maxWidth: 'fill',
+      maxHeight: 'fill',
+      align: 'center',
+      label: {
+        visible: true,
+        maxWidth: 'fill',
+        minFontSize: 8,
+        maxFontSize: 12,
+        fontFamily: 'Sans-Serif',
+        fontStyle: 'normal',
+        textColor: Colors.Black.keyword,
+        fontVariant: 'normal',
+        fontWeight: 'normal',
+        useGlobalMinFontSize: true,
+      },
+      border: {
+        strokeWidth: 1,
+        stroke: 'gray',
+      },
+    },
+  },
+  metric: {
+    text: {
+      lightColor: '#E0E5EE',
+      darkColor: '#343741',
+    },
+    border: '#EDF0F5',
+    barBackground: '#EDF0F5',
+    background: '#FFFFFF',
+    nonFiniteText: 'N/A',
+    minHeight: 64,
+  },
+  tooltip: {
+    maxWidth: 260,
+    maxTableHeight: 120,
+    defaultDotColor: Colors.Black.keyword,
+  },
+  flamegraph: {
+    navigation: {
+      textColor: 'rgb(52, 55, 65)',
+      buttonTextColor: 'rgb(0, 97, 166)',
+      buttonDisabledTextColor: 'rgb(162, 171, 186)',
+      buttonBackgroundColor: 'rgb(204, 228, 245)',
+      buttonDisabledBackgroundColor: 'rgba(211, 218, 230, 0.15)',
+    },
+    scrollbarThumb: 'rgb(52, 55, 65)',
+    scrollbarTrack: 'rgb(211, 218, 230)',
+  },
+  highlighter: {
+    point: {
+      opacity: 1,
+      fill: ColorVariant.None,
+      stroke: ColorVariant.Series,
+      strokeWidth: 4,
+      radius: 10,
+    },
+  },
+};
diff --git a/packages/charts/src/utils/themes/light_theme.ts b/packages/charts/src/utils/themes/light_theme.ts
index 4e88e8b8d5..7db8b37842 100644
--- a/packages/charts/src/utils/themes/light_theme.ts
+++ b/packages/charts/src/utils/themes/light_theme.ts
@@ -8,14 +8,10 @@
 
 import { palettes } from './colors';
 import { Theme } from './theme';
-import {
-  DEFAULT_CHART_MARGINS,
-  DEFAULT_CHART_PADDING,
-  DEFAULT_GEOMETRY_STYLES,
-  DEFAULT_MISSING_COLOR,
-} from './theme_common';
+import { DEFAULT_CHART_MARGINS, DEFAULT_CHART_PADDING, DEFAULT_GEOMETRY_STYLES } from './theme_common';
 import { Colors } from '../../common/colors';
-import { GOLDEN_RATIO, TAU } from '../../common/constants';
+import { TAU } from '../../common/constants';
+import { DEFAULT_FONT_FAMILY } from '../../common/default_theme_attributes';
 import { ColorVariant } from '../common';
 
 /** @public */
@@ -25,15 +21,15 @@ export const LIGHT_THEME: Theme = {
   lineSeriesStyle: {
     line: {
       visible: true,
-      strokeWidth: 1,
+      strokeWidth: 2,
       opacity: 1,
     },
     point: {
       visible: true,
-      strokeWidth: 1,
+      strokeWidth: 2,
       stroke: ColorVariant.Series,
-      fill: Colors.White.keyword,
-      radius: 2,
+      fill: '#FFF',
+      radius: 3,
       opacity: 1,
     },
     isolatedPoint: {
@@ -69,15 +65,15 @@ export const LIGHT_THEME: Theme = {
     },
     line: {
       visible: true,
-      strokeWidth: 1,
+      strokeWidth: 2,
       opacity: 1,
     },
     point: {
       visible: false,
       stroke: ColorVariant.Series,
-      strokeWidth: 1,
-      fill: Colors.White.keyword,
-      radius: 2,
+      strokeWidth: 2,
+      fill: '#FFF',
+      radius: 3,
       opacity: 1,
     },
     isolatedPoint: {
@@ -111,11 +107,12 @@ export const LIGHT_THEME: Theme = {
       strokeWidth: 1,
     },
     displayValue: {
-      fontSize: 8,
+      fontSize: 10,
       fontStyle: 'normal',
-      fontFamily: 'sans-serif',
+      fontFamily: DEFAULT_FONT_FAMILY,
+      alignment: { horizontal: 'center', vertical: 'middle' },
       padding: 0,
-      fill: '#777',
+      fill: { textBorder: 0 },
       offsetX: 0,
       offsetY: 0,
     },
@@ -137,12 +134,12 @@ export const LIGHT_THEME: Theme = {
     axisTitle: {
       visible: true,
       fontSize: 12,
-      fontFamily: 'sans-serif',
+      fontFamily: DEFAULT_FONT_FAMILY,
       padding: {
-        inner: 8,
+        inner: 10,
         outer: 0,
       },
-      fill: '#333',
+      fill: '#343741',
     },
     axisPanelTitle: {
       visible: true,
@@ -156,16 +153,16 @@ export const LIGHT_THEME: Theme = {
     },
     axisLine: {
       visible: true,
-      stroke: '#eaeaea',
+      stroke: '#eaedf3',
       strokeWidth: 1,
     },
     tickLabel: {
       visible: true,
       fontSize: 10,
-      fontFamily: 'sans-serif',
+      fontFamily: DEFAULT_FONT_FAMILY,
       fontStyle: 'normal',
-      fill: '#777',
-      padding: 0,
+      fill: '#646a77',
+      padding: { outer: 8, inner: 10 },
       rotation: 0,
       offset: {
         x: 0,
@@ -178,33 +175,33 @@ export const LIGHT_THEME: Theme = {
       },
     },
     tickLine: {
-      visible: true,
-      stroke: '#eaeaea',
+      visible: false,
+      stroke: '#eaedf3',
       strokeWidth: 1,
       size: 10,
       padding: 10,
     },
     gridLine: {
       horizontal: {
-        visible: false,
-        stroke: '#D3DAE6',
+        visible: true,
+        stroke: '#eaedf3',
         strokeWidth: 1,
         opacity: 1,
         dash: [0, 0],
       },
       vertical: {
-        visible: false,
-        stroke: '#D3DAE6',
+        visible: true,
+        stroke: '#eaedf3',
         strokeWidth: 1,
         opacity: 1,
-        dash: [0, 0],
+        dash: [4, 4],
       },
       lumaSteps: [224, 184, 128, 96, 64, 32, 16, 8, 4, 2, 1, 0, 0, 0, 0, 0],
     },
   },
   colors: {
     vizColors: palettes.echPaletteColorBlind.colors,
-    defaultVizColor: DEFAULT_MISSING_COLOR,
+    defaultVizColor: '#6092C0',
   },
   legend: {
     verticalWidth: 200,
@@ -217,24 +214,25 @@ export const LIGHT_THEME: Theme = {
   },
   crosshair: {
     band: {
-      fill: '#F5F5F5',
       visible: true,
+      fill: '#F1F4FA',
     },
     line: {
-      stroke: '#98A2B3',
-      strokeWidth: 1,
       visible: true,
+      stroke: '#69707D',
+      strokeWidth: 1,
+      dash: [4, 4],
     },
     crossLine: {
-      stroke: '#98A2B3',
-      strokeWidth: 1,
-      dash: [5, 5],
       visible: true,
+      stroke: '#69707D',
+      strokeWidth: 1,
+      dash: [4, 4],
     },
   },
   background: {
-    color: Colors.Transparent.keyword,
-    fallbackColor: Colors.White.keyword,
+    color: '#FFF',
+    fallbackColor: '#FFF',
   },
   goal: {
     minFontSize: 8,
@@ -252,48 +250,48 @@ export const LIGHT_THEME: Theme = {
     capturePad: 16,
     tickLabel: {
       fontStyle: 'normal',
-      fontFamily: 'sans-serif',
-      fill: Colors.Black.keyword,
+      fontFamily: DEFAULT_FONT_FAMILY,
+      fill: '#646a77',
     },
     majorLabel: {
       fontStyle: 'normal',
-      fontFamily: 'sans-serif',
-      fill: Colors.Black.keyword,
+      fontFamily: DEFAULT_FONT_FAMILY,
+      fill: '#343741',
     },
     minorLabel: {
       fontStyle: 'normal',
-      fontFamily: 'sans-serif',
-      fill: Colors.Black.keyword,
+      fontFamily: DEFAULT_FONT_FAMILY,
+      fill: '#646a77',
     },
     majorCenterLabel: {
       fontStyle: 'normal',
-      fontFamily: 'sans-serif',
-      fill: Colors.Black.keyword,
+      fontFamily: DEFAULT_FONT_FAMILY,
+      fill: '#343741',
     },
     minorCenterLabel: {
       fontStyle: 'normal',
-      fontFamily: 'sans-serif',
-      fill: Colors.Black.keyword,
+      fontFamily: DEFAULT_FONT_FAMILY,
+      fill: '#646a77',
     },
     targetLine: {
-      stroke: Colors.Black.keyword,
+      stroke: '#343741',
     },
     tickLine: {
-      stroke: 'darkgrey',
+      stroke: '#98A2B3',
     },
     progressLine: {
-      stroke: Colors.Black.keyword,
+      stroke: '#343741',
     },
   },
   partition: {
-    outerSizeRatio: 1 / GOLDEN_RATIO,
+    outerSizeRatio: 1,
     emptySizeRatio: 0,
-    fontFamily: 'Sans-Serif',
+    fontFamily: DEFAULT_FONT_FAMILY,
     minFontSize: 8,
-    maxFontSize: 64,
+    maxFontSize: 16,
     idealFontSizeJump: 1.05,
     maximizeFontSize: false,
-    circlePadding: 2,
+    circlePadding: 4,
     radialPadding: TAU / 360,
     horizontalTextAngleThreshold: TAU / 12,
     horizontalTextEnforcer: 1,
@@ -304,7 +302,7 @@ export const LIGHT_THEME: Theme = {
       fontVariant: 'normal',
       fontWeight: 400,
       valueFont: {
-        fontWeight: 400,
+        fontWeight: 700,
         fontStyle: 'normal',
         fontVariant: 'normal',
       },
@@ -314,7 +312,7 @@ export const LIGHT_THEME: Theme = {
     linkLabel: {
       maximumSection: 10,
       fontFamily: 'Sans-Serif',
-      fontSize: 12,
+      fontSize: 11,
       fontStyle: 'normal',
       fontVariant: 'normal',
       fontWeight: 400,
@@ -323,9 +321,9 @@ export const LIGHT_THEME: Theme = {
       horizontalStemLength: 10,
       radiusPadding: 10,
       lineWidth: 1,
-      maxCount: 36,
+      maxCount: 5,
       maxTextLength: 100,
-      textColor: ColorVariant.Adaptive,
+      textColor: '#343741',
       minimumStemLength: 0,
       stemAngle: TAU / 8,
       padding: 0,
@@ -335,8 +333,8 @@ export const LIGHT_THEME: Theme = {
         fontVariant: 'normal',
       },
     },
-    sectorLineWidth: 1,
-    sectorLineStroke: 'white',
+    sectorLineWidth: 1.5,
+    sectorLineStroke: '#FFF',
   },
   heatmap: {
     brushArea: {
diff --git a/packages/charts/src/utils/themes/theme_common.ts b/packages/charts/src/utils/themes/theme_common.ts
index 3f797332ab..65cffb715c 100644
--- a/packages/charts/src/utils/themes/theme_common.ts
+++ b/packages/charts/src/utils/themes/theme_common.ts
@@ -22,6 +22,17 @@ export const DEFAULT_CHART_PADDING: Margins = {
 };
 /** @internal */
 export const DEFAULT_CHART_MARGINS: Margins = {
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+};
+
+/**
+ * Remove in next step to limit diffs
+ * @internal
+ */
+export const LEGACY_CHART_MARGINS: Margins = {
   left: 10,
   right: 10,
   top: 10,
diff --git a/storybook/parameters.ts b/storybook/parameters.ts
index f37be1941c..a9f18c56f9 100644
--- a/storybook/parameters.ts
+++ b/storybook/parameters.ts
@@ -37,34 +37,34 @@ export const storybookParameters: Parameters = {
     },
   },
   theme: {
-    default: 'eui-light',
+    default: 'light',
     clearable: false,
     selector: 'html',
     themes: [
       {
-        id: 'eui-light',
-        title: 'Light - EUI',
-        class: ['light-theme', 'eui'],
+        id: 'light',
+        title: 'Light',
+        class: 'light-theme',
         color: euiLightVars.euiColorEmptyShade,
         imageUrl: euiLogoUrl,
       },
       {
-        id: 'eui-dark',
-        title: 'Dark - EUI',
-        class: ['dark-theme', 'eui'],
+        id: 'dark',
+        title: 'Dark',
+        class: 'dark-theme',
         color: euiDarkVars.euiColorEmptyShade,
         imageUrl: euiLogoUrl,
       },
       {
-        id: 'light',
-        title: 'Light',
-        class: 'light-theme',
+        id: 'legacy-light',
+        title: 'Legacy Light',
+        class: ['light-theme', 'legacy'],
         color: '#fff',
       },
       {
-        id: 'dark',
-        title: 'Dark',
-        class: 'dark-theme',
+        id: 'legacy-dark',
+        title: 'Legacy Dark',
+        class: ['dark-theme', 'legacy'],
         color: '#000',
       },
     ],
@@ -103,6 +103,11 @@ export const storybookParameters: Parameters = {
         title: 'Show chart description',
         defaultValue: false,
       },
+      {
+        id: 'showChartBoundary',
+        title: 'Show chart boundary',
+        defaultValue: false,
+      },
     ],
   },
   viewport: {
diff --git a/storybook/story_wrapper.tsx b/storybook/story_wrapper.tsx
index 333fffb3de..a413305430 100644
--- a/storybook/story_wrapper.tsx
+++ b/storybook/story_wrapper.tsx
@@ -8,6 +8,7 @@
 
 import { EuiProvider, EuiMarkdownFormat, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiText } from '@elastic/eui';
 import { DecoratorFunction } from '@storybook/addons';
+import classNames from 'classnames';
 import React from 'react';
 
 import { ThemeId, ThemeIdProvider, BackgroundIdProvider } from './use_base_theme';
@@ -17,9 +18,14 @@ export const StoryWrapper: DecoratorFunction<JSX.Element> = (Story, context) =>
 
   const { globals, parameters } = context;
 
-  const themeId = globals?.theme ?? ThemeId.EUILight;
+  const themeId = globals?.theme ?? ThemeId.Light;
   const backgroundId = globals?.background;
-  const { showHeader = false, showChartTitle = false, showChartDescription = false } = globals?.toggles ?? {};
+  const {
+    showHeader = false,
+    showChartTitle = false,
+    showChartDescription = false,
+    showChartBoundary = false,
+  } = globals?.toggles ?? {};
   const markdown = parameters?.markdown;
   const colorMode = themeId.includes('light') ? 'light' : 'dark';
 
@@ -49,7 +55,7 @@ export const StoryWrapper: DecoratorFunction<JSX.Element> = (Story, context) =>
             )}
 
             <EuiFlexItem grow={false}>
-              <div id="story-root">
+              <div id="story-root" className={classNames({ showChartBoundary })}>
                 <Story
                   {...context}
                   title={showChartTitle ? context.kind : undefined}
diff --git a/storybook/style.scss b/storybook/style.scss
index 776634374b..313cd1d715 100644
--- a/storybook/style.scss
+++ b/storybook/style.scss
@@ -30,14 +30,18 @@ html {
     @import '~@elastic/eui/dist/eui_theme_light';
     @import '~@elastic/charts/src/theme_light';
 
-    body,
-    .echChart {
-      background: white !important;
-    }
+    &:not(.legacy) {
+      @import '~@elastic/eui/src/themes/amsterdam/colors_light';
+
+      body,
+      .echChart {
+        background: $euiColorEmptyShade !important;
+      }
 
-    .euiText {
-      // required to prevent inheriting from html
-      color: $euiTitleColor;
+      .euiText {
+        // required to prevent inheriting from html
+        color: $euiTitleColor;
+      }
     }
   }
 
@@ -45,33 +49,34 @@ html {
     @import '~@elastic/eui/dist/eui_theme_dark';
     @import '~@elastic/charts/src/theme_dark';
 
-    body,
-    .echChart {
-      background: black !important;
-    }
+    &:not(.legacy) {
+      @import '~@elastic/eui/src/themes/amsterdam/colors_dark';
 
-    .euiText {
-      // required to prevent inheriting from html
-      color: $euiTitleColor;
+      body,
+      .echChart {
+        background: $euiColorEmptyShade !important;
+      }
+
+      .euiText {
+        // required to prevent inheriting from html
+        color: $euiTitleColor;
+      }
     }
+
   }
 
-  &.eui {
+  &.legacy {
     &.dark-theme {
-      @import '~@elastic/eui/src/themes/amsterdam/colors_dark';
-
       body,
       .echChart {
-        background: $euiColorEmptyShade !important;
+        background: black !important;
       }
     }
 
     &.light-theme {
-      @import '~@elastic/eui/src/themes/amsterdam/colors_light';
-
       body,
       .echChart {
-        background: $euiColorEmptyShade !important;
+        background: white !important;
       }
     }
   }
@@ -131,7 +136,10 @@ body {
   position: relative;
   z-index: 500;
   box-sizing: border-box;
-  /* background-color: blanchedalmond; */
+
+  &.showChartBoundary {
+    background-color: blanchedalmond;
+  }
 }
 
 #story-header {
diff --git a/storybook/use_base_theme.ts b/storybook/use_base_theme.ts
index a6cd11a4b8..d5176c3124 100644
--- a/storybook/use_base_theme.ts
+++ b/storybook/use_base_theme.ts
@@ -6,11 +6,17 @@
  * Side Public License, v 1.
  */
 
-import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
 import { createContext, useContext } from 'react';
 import { $Values } from 'utility-types';
 
-import { Theme, LIGHT_THEME, DARK_THEME, DEFAULT_CHART_MARGINS } from '@elastic/charts';
+import {
+  Theme,
+  LIGHT_THEME,
+  DARK_THEME,
+  LEGACY_CHART_MARGINS,
+  LEGACY_DARK_THEME,
+  LEGACY_LIGHT_THEME,
+} from '@elastic/charts';
 import { mergePartial } from '@elastic/charts/src/utils/common';
 
 import { storybookParameters } from './parameters';
@@ -22,13 +28,14 @@ import { storybookParameters } from './parameters';
 export const ThemeId = Object.freeze({
   Light: 'light' as const,
   Dark: 'dark' as const,
-  EUILight: 'eui-light' as const,
-  EUIDark: 'eui-dark' as const,
+  // TODO remove legacy themes
+  LegacyLight: 'legacy-light' as const,
+  LegacyDark: 'legacy-dark' as const,
 });
 /** @internal */
 export type ThemeId = $Values<typeof ThemeId>;
 
-const ThemeContext = createContext<ThemeId>(ThemeId.EUILight);
+const ThemeContext = createContext<ThemeId>(ThemeId.Light);
 const BackgroundContext = createContext<string | undefined>(undefined);
 
 export const ThemeIdProvider = ThemeContext.Provider;
@@ -37,8 +44,8 @@ export const BackgroundIdProvider = BackgroundContext.Provider;
 const themeMap = {
   [ThemeId.Light]: LIGHT_THEME,
   [ThemeId.Dark]: DARK_THEME,
-  [ThemeId.EUILight]: mergePartial(LIGHT_THEME, EUI_CHARTS_THEME_LIGHT.theme),
-  [ThemeId.EUIDark]: mergePartial(DARK_THEME, EUI_CHARTS_THEME_DARK.theme),
+  [ThemeId.LegacyLight]: LEGACY_LIGHT_THEME,
+  [ThemeId.LegacyDark]: LEGACY_DARK_THEME,
 };
 
 const getBackground = (backgroundId?: string) => {
@@ -56,8 +63,8 @@ export const useBaseTheme = (): Theme => {
   const backgroundColor = getBackground(backgroundId);
 
   return mergePartial(theme, {
-    // eui chart theme has no margin for some reason. This is just for consistency.
-    chartMargins: DEFAULT_CHART_MARGINS,
+    // Keep this just for consistency for the first pass of theme changes
+    chartMargins: LEGACY_CHART_MARGINS,
     background: { color: backgroundColor },
   });
 };