diff --git a/package-lock.json b/package-lock.json
index e5c647a2fc..1370bc927c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28072,10 +28072,12 @@
       "version": "0.53.0",
       "license": "Apache-2.0",
       "dependencies": {
+        "@deephaven/components": "file:../components",
         "@deephaven/icons": "file:../icons",
         "@deephaven/jsapi-types": "file:../jsapi-types",
         "@deephaven/jsapi-utils": "file:../jsapi-utils",
         "@deephaven/log": "file:../log",
+        "@deephaven/react-hooks": "file:../react-hooks",
         "@deephaven/utils": "file:../utils",
         "deep-equal": "^2.0.5",
         "lodash.debounce": "^4.0.8",
@@ -30147,12 +30149,14 @@
     "@deephaven/chart": {
       "version": "file:packages/chart",
       "requires": {
+        "@deephaven/components": "file:../components",
         "@deephaven/icons": "file:../icons",
         "@deephaven/jsapi-shim": "file:../jsapi-shim",
         "@deephaven/jsapi-types": "file:../jsapi-types",
         "@deephaven/jsapi-utils": "file:../jsapi-utils",
         "@deephaven/log": "file:../log",
         "@deephaven/mocks": "file:../mocks",
+        "@deephaven/react-hooks": "file:../react-hooks",
         "@deephaven/utils": "file:../utils",
         "@types/plotly.js": "^2.12.11",
         "deep-equal": "^2.0.5",
diff --git a/packages/app-utils/src/components/ThemeBootstrap.tsx b/packages/app-utils/src/components/ThemeBootstrap.tsx
index fd9b7724cc..2beeabb2e0 100644
--- a/packages/app-utils/src/components/ThemeBootstrap.tsx
+++ b/packages/app-utils/src/components/ThemeBootstrap.tsx
@@ -1,4 +1,5 @@
 import { useContext, useMemo } from 'react';
+import { ChartThemeProvider } from '@deephaven/chart';
 import { ThemeProvider } from '@deephaven/components';
 import { PluginsContext } from '@deephaven/plugin';
 import { getThemeDataFromPlugins } from '../plugins';
@@ -19,7 +20,11 @@ export function ThemeBootstrap({ children }: ThemeBootstrapProps): JSX.Element {
     [pluginModules]
   );
 
-  return <ThemeProvider themes={themes}>{children}</ThemeProvider>;
+  return (
+    <ThemeProvider themes={themes}>
+      <ChartThemeProvider>{children}</ChartThemeProvider>
+    </ThemeProvider>
+  );
 }
 
 export default ThemeBootstrap;
diff --git a/packages/chart/package.json b/packages/chart/package.json
index e6cfd8a40e..5b9a87476c 100644
--- a/packages/chart/package.json
+++ b/packages/chart/package.json
@@ -27,10 +27,12 @@
     "build:sass": "sass --embed-sources --load-path=../../node_modules ./src:./dist"
   },
   "dependencies": {
+    "@deephaven/components": "file:../components",
     "@deephaven/icons": "file:../icons",
     "@deephaven/jsapi-types": "file:../jsapi-types",
     "@deephaven/jsapi-utils": "file:../jsapi-utils",
     "@deephaven/log": "file:../log",
+    "@deephaven/react-hooks": "file:../react-hooks",
     "@deephaven/utils": "file:../utils",
     "deep-equal": "^2.0.5",
     "lodash.debounce": "^4.0.8",
diff --git a/packages/chart/src/Chart.tsx b/packages/chart/src/Chart.tsx
index 67220688d0..ad25574821 100644
--- a/packages/chart/src/Chart.tsx
+++ b/packages/chart/src/Chart.tsx
@@ -28,7 +28,7 @@ import {
   ModeBarButtonAny,
 } from 'plotly.js';
 import type { PlotParams } from 'react-plotly.js';
-import createPlotlyComponent from 'react-plotly.js/factory.js';
+import createPlotlyComponent from './plotly/createPlotlyComponent';
 import Plotly from './plotly/Plotly';
 import ChartModel from './ChartModel';
 import ChartUtils, { ChartModelSettings } from './ChartUtils';
diff --git a/packages/chart/src/ChartModelFactory.test.ts b/packages/chart/src/ChartModelFactory.test.ts
index 97aad70078..6cabb63321 100644
--- a/packages/chart/src/ChartModelFactory.test.ts
+++ b/packages/chart/src/ChartModelFactory.test.ts
@@ -1,17 +1,23 @@
 import dh from '@deephaven/jsapi-shim';
+import { TestUtils } from '@deephaven/utils';
 import ChartModelFactory from './ChartModelFactory';
+import type { ChartTheme } from './ChartTheme';
 import FigureChartModel from './FigureChartModel';
 
+const { createMockProxy } = TestUtils;
+
 describe('creating model from metadata', () => {
   it('handles loading a FigureChartModel from table settings', async () => {
     const columns = [{ name: 'A' }, { name: 'B' }, { name: 'C' }];
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const table = new (dh as any).Table({ columns });
     const settings = { series: ['C'], xAxis: 'name', type: 'PIE' as const };
+    const chartTheme = createMockProxy<ChartTheme>();
     const model = await ChartModelFactory.makeModelFromSettings(
       dh,
       settings,
-      table
+      table,
+      chartTheme
     );
 
     expect(model).toBeInstanceOf(FigureChartModel);
diff --git a/packages/chart/src/ChartModelFactory.ts b/packages/chart/src/ChartModelFactory.ts
index d2c528067d..a3fb18024c 100644
--- a/packages/chart/src/ChartModelFactory.ts
+++ b/packages/chart/src/ChartModelFactory.ts
@@ -1,7 +1,7 @@
 import type { dh as DhType, Figure, Table } from '@deephaven/jsapi-types';
 import ChartUtils, { ChartModelSettings } from './ChartUtils';
 import FigureChartModel from './FigureChartModel';
-import ChartTheme from './ChartTheme';
+import { ChartTheme } from './ChartTheme';
 import ChartModel from './ChartModel';
 
 class ChartModelFactory {
@@ -16,7 +16,7 @@ class ChartModelFactory {
    * @param settings.xAxis The column name to use for the x-axis
    * @param [settings.hiddenSeries] Array of hidden series names
    * @param table The table to build the model for
-   * @param theme The theme for the figure. Defaults to ChartTheme
+   * @param theme The theme for the figure
    * @returns The ChartModel Promise representing the figure
    * CRA sets tsconfig to type check JS based on jsdoc comments. It isn't able to figure out FigureChartModel extends ChartModel
    * This causes TS issues in 1 or 2 spots. Once this is TS it can be returned to just FigureChartModel
@@ -25,14 +25,14 @@ class ChartModelFactory {
     dh: DhType,
     settings: ChartModelSettings,
     table: Table,
-    theme = ChartTheme
+    theme: ChartTheme
   ): Promise<ChartModel> {
     const figure = await ChartModelFactory.makeFigureFromSettings(
       dh,
       settings,
       table
     );
-    return new FigureChartModel(dh, figure, settings, theme);
+    return new FigureChartModel(dh, figure, theme, settings);
   }
 
   /**
@@ -78,7 +78,7 @@ class ChartModelFactory {
    * @param settings.xAxis The column name to use for the x-axis
    * @param [settings.hiddenSeries] Array of hidden series names
    * @param figure The figure to build the model for
-   * @param theme The theme for the figure. Defaults to ChartTheme
+   * @param theme The theme for the figure
    * @returns The FigureChartModel representing the figure
    * CRA sets tsconfig to type check JS based on jsdoc comments. It isn't able to figure out FigureChartModel extends ChartModel
    * This causes TS issues in 1 or 2 spots. Once this is TS it can be returned to just FigureChartModel
@@ -87,9 +87,9 @@ class ChartModelFactory {
     dh: DhType,
     settings: ChartModelSettings | undefined,
     figure: Figure,
-    theme = ChartTheme
+    theme: ChartTheme
   ): Promise<ChartModel> {
-    return new FigureChartModel(dh, figure, settings, theme);
+    return new FigureChartModel(dh, figure, theme, settings);
   }
 }
 
diff --git a/packages/chart/src/ChartTheme.module.scss b/packages/chart/src/ChartTheme.module.scss
index 8c337cb0a8..d483ed59dc 100644
--- a/packages/chart/src/ChartTheme.module.scss
+++ b/packages/chart/src/ChartTheme.module.scss
@@ -2,20 +2,20 @@
 @import '@deephaven/components/scss/custom.scss';
 
 :export {
-  paper-bgcolor: $content-bg;
-  plot-bgcolor: $gray-850;
-  title-color: $white;
-  colorway: $blue $green $yellow $purple $orange $red $white;
-  gridcolor: $gray-700;
-  linecolor: $gray-500;
-  zerolinecolor: $gray-300;
-  activecolor: $primary;
-  rangebgcolor: rgba($gray-500, 0.7);
-  area-color: $blue;
-  trend-color: lighten($green, 20%);
-  line-color: $green;
-  error-band-line-color: lighten($green, 40%);
-  error-band-fill-color: rgba(lighten($green, 20%), 0.1);
-  ohlc-increasing: $green;
-  ohlc-decreasing: $red;
+  paper-bgcolor: var(--dh-color-chart-bg);
+  plot-bgcolor: var(--dh-color-chart-plot-bg);
+  title-color: var(--dh-color-chart-title);
+  colorway: var(--dh-color-chart-colorway);
+  gridcolor: var(--dh-color-chart-grid);
+  linecolor: var(--dh-color-chart-axis-line);
+  zerolinecolor: var(--dh-color-chart-axis-line-zero);
+  activecolor: var(--dh-color-chart-active);
+  rangebgcolor: var(--dh-color-chart-range-bg);
+  area-color: var(--dh-color-chart-area);
+  trend-color: var(--dh-color-chart-trend);
+  line-color: var(--dh-color-chart-line-deprecated);
+  error-band-line-color: var(--dh-color-chart-error-band-line);
+  error-band-fill-color: var(--dh-color-chart-error-band-fill);
+  ohlc-increasing: var(--dh-color-chart-ohlc-increase);
+  ohlc-decreasing: var(--dh-color-chart-ohlc-decrease);
 }
diff --git a/packages/chart/src/ChartTheme.test.ts b/packages/chart/src/ChartTheme.test.ts
new file mode 100644
index 0000000000..f7c6387946
--- /dev/null
+++ b/packages/chart/src/ChartTheme.test.ts
@@ -0,0 +1,36 @@
+/// <reference types="./declaration" />
+
+import { TestUtils } from '@deephaven/utils';
+import { resolveCssVariablesInRecord } from '@deephaven/components';
+import { defaultChartTheme } from './ChartTheme';
+import chartThemeRaw from './ChartTheme.module.scss';
+
+jest.mock('@deephaven/components', () => ({
+  ...jest.requireActual('@deephaven/components'),
+  resolveCssVariablesInRecord: jest.fn(),
+}));
+
+const { asMock } = TestUtils;
+
+const mockChartTheme = new Proxy(
+  {},
+  { get: (_target, name) => `chartTheme['${String(name)}']` }
+);
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  expect.hasAssertions();
+
+  asMock(resolveCssVariablesInRecord)
+    .mockName('resolveCssVariablesInRecord')
+    .mockReturnValue(mockChartTheme);
+});
+
+describe('defaultChartTheme', () => {
+  it('should create the default chart theme', () => {
+    const actual = defaultChartTheme();
+
+    expect(resolveCssVariablesInRecord).toHaveBeenCalledWith(chartThemeRaw);
+    expect(actual).toMatchSnapshot();
+  });
+});
diff --git a/packages/chart/src/ChartTheme.ts b/packages/chart/src/ChartTheme.ts
index 9740c24521..816d599bb3 100644
--- a/packages/chart/src/ChartTheme.ts
+++ b/packages/chart/src/ChartTheme.ts
@@ -1,20 +1,67 @@
-import ChartTheme from './ChartTheme.module.scss';
+import {
+  getExpressionRanges,
+  resolveCssVariablesInRecord,
+} from '@deephaven/components';
+import Log from '@deephaven/log';
+import { ColorUtils } from '@deephaven/utils';
+import chartThemeRaw from './ChartTheme.module.scss';
 
-export default Object.freeze({
-  paper_bgcolor: ChartTheme['paper-bgcolor'],
-  plot_bgcolor: ChartTheme['plot-bgcolor'],
-  title_color: ChartTheme['title-color'],
-  colorway: ChartTheme.colorway,
-  gridcolor: ChartTheme.gridcolor,
-  linecolor: ChartTheme.linecolor,
-  zerolinecolor: ChartTheme.zerolinecolor,
-  activecolor: ChartTheme.activecolor,
-  rangebgcolor: ChartTheme.rangebgcolor,
-  area_color: ChartTheme['area-color'],
-  trend_color: ChartTheme['trend-color'],
-  line_color: ChartTheme['line-color'],
-  error_band_line_color: ChartTheme['error-band-line-color'],
-  error_band_fill_color: ChartTheme['error-band-fill-color'],
-  ohlc_increasing: ChartTheme['ohlc-increasing'],
-  ohlc_decreasing: ChartTheme['ohlc-decreasing'],
-});
+const log = Log.module('ChartTheme');
+
+export interface ChartTheme {
+  paper_bgcolor: string;
+  plot_bgcolor: string;
+  title_color: string;
+  colorway: string;
+  gridcolor: string;
+  linecolor: string;
+  zerolinecolor: string;
+  activecolor: string;
+  rangebgcolor: string;
+  area_color: string;
+  trend_color: string;
+  line_color: string;
+  error_band_line_color: string;
+  error_band_fill_color: string;
+  ohlc_increasing: string;
+  ohlc_decreasing: string;
+}
+
+export function defaultChartTheme(): Readonly<ChartTheme> {
+  const chartTheme = resolveCssVariablesInRecord(chartThemeRaw);
+
+  // The color normalization in `resolveCssVariablesInRecord` won't work for
+  // colorway since it is an array of colors. We need to explicitly normalize
+  // each color expression
+  chartTheme.colorway = getExpressionRanges(chartTheme.colorway ?? '')
+    .map(([start, end]) =>
+      ColorUtils.normalizeCssColor(
+        chartTheme.colorway.substring(start, end + 1)
+      )
+    )
+    .join(' ');
+
+  log.debug2('Chart theme:', chartThemeRaw);
+  log.debug2('Chart theme derived:', chartTheme);
+
+  return Object.freeze({
+    paper_bgcolor: chartTheme['paper-bgcolor'],
+    plot_bgcolor: chartTheme['plot-bgcolor'],
+    title_color: chartTheme['title-color'],
+    colorway: chartTheme.colorway,
+    gridcolor: chartTheme.gridcolor,
+    linecolor: chartTheme.linecolor,
+    zerolinecolor: chartTheme.zerolinecolor,
+    activecolor: chartTheme.activecolor,
+    rangebgcolor: chartTheme.rangebgcolor,
+    area_color: chartTheme['area-color'],
+    trend_color: chartTheme['trend-color'],
+    line_color: chartTheme['line-color'],
+    error_band_line_color: chartTheme['error-band-line-color'],
+    error_band_fill_color: chartTheme['error-band-fill-color'],
+    ohlc_increasing: chartTheme['ohlc-increasing'],
+    ohlc_decreasing: chartTheme['ohlc-decreasing'],
+  });
+}
+
+export default defaultChartTheme;
diff --git a/packages/chart/src/ChartThemeProvider.tsx b/packages/chart/src/ChartThemeProvider.tsx
new file mode 100644
index 0000000000..cd5272e0f5
--- /dev/null
+++ b/packages/chart/src/ChartThemeProvider.tsx
@@ -0,0 +1,43 @@
+import { createContext, ReactNode, useEffect, useState } from 'react';
+import { useTheme } from '@deephaven/components';
+import defaultChartTheme, { ChartTheme } from './ChartTheme';
+
+export type ChartThemeContextValue = ChartTheme;
+
+export const ChartThemeContext = createContext<ChartThemeContextValue | null>(
+  null
+);
+
+export interface ChartThemeProviderProps {
+  children: ReactNode;
+}
+
+/*
+ * Provides a chart theme based on the active themes from the ThemeProvider.
+ */
+export function ChartThemeProvider({
+  children,
+}: ChartThemeProviderProps): JSX.Element {
+  const { activeThemes } = useTheme();
+
+  const [chartTheme, setChartTheme] = useState<ChartTheme | null>(null);
+
+  // The `ThemeProvider` that supplies `activeThemes` also provides the corresponding
+  // CSS theme variables to the DOM by dynamically rendering <style> tags whenever
+  // the `activeThemes` change. Painting the latest CSS variables to the DOM may
+  // not happen until after `ChartThemeProvider` is rendered, but they should be
+  // available by the time the effect runs. Therefore, it is important to derive
+  // the chart theme in an effect instead of deriving in a `useMemo` to ensure
+  // we have the latest CSS variables.
+  useEffect(() => {
+    if (activeThemes != null) {
+      setChartTheme(defaultChartTheme());
+    }
+  }, [activeThemes]);
+
+  return (
+    <ChartThemeContext.Provider value={chartTheme}>
+      {children}
+    </ChartThemeContext.Provider>
+  );
+}
diff --git a/packages/chart/src/ChartUtils.test.ts b/packages/chart/src/ChartUtils.test.ts
index 20071cd7a5..6aa0bb1dd3 100644
--- a/packages/chart/src/ChartUtils.test.ts
+++ b/packages/chart/src/ChartUtils.test.ts
@@ -1,17 +1,22 @@
 import dh from '@deephaven/jsapi-shim';
 import { Formatter } from '@deephaven/jsapi-utils';
+import { TestUtils } from '@deephaven/utils';
 import { Layout } from 'plotly.js';
 import ChartUtils from './ChartUtils';
 import ChartTestUtils from './ChartTestUtils';
-import ChartTheme from './ChartTheme';
+import type { ChartTheme } from './ChartTheme';
 
 const chartUtils = new ChartUtils(dh);
 const chartTestUtils = new ChartTestUtils(dh);
 
+const { createMockProxy } = TestUtils;
+
 function makeFormatter() {
   return new Formatter(dh);
 }
 
+const chartTheme = createMockProxy<ChartTheme>();
+
 it('groups the axes by type properly', () => {
   const testAxes = (axes, expectedResult) => {
     const chart = { axes };
@@ -37,8 +42,8 @@ it('groups the axes by type properly', () => {
 });
 
 it('returns a newly composed layout object each time', () => {
-  const layout1 = chartUtils.makeDefaultLayout(ChartTheme);
-  const layout2 = chartUtils.makeDefaultLayout(ChartTheme);
+  const layout1 = chartUtils.makeDefaultLayout(chartTheme);
+  const layout2 = chartUtils.makeDefaultLayout(chartTheme);
 
   expect(layout1).not.toBe(layout2);
   expect(layout1.xaxis).not.toBe(layout2.xaxis);
@@ -194,7 +199,7 @@ describe('updating layout axes', () => {
   it('adds new axes', () => {
     const layout = {};
     const axes = makeTwinAxes();
-    chartUtils.updateLayoutAxes(layout, axes, axes);
+    chartUtils.updateLayoutAxes(layout, axes, axes, chartTheme);
     expect(layout).toEqual(
       expect.objectContaining({
         xaxis: expect.objectContaining({
@@ -216,11 +221,11 @@ describe('updating layout axes', () => {
   it('keeps the same axis objects, updates domain', () => {
     const layout: Partial<Layout> = {};
     const axes = makeTwinAxes();
-    chartUtils.updateLayoutAxes(layout, axes, axes, 10);
+    chartUtils.updateLayoutAxes(layout, axes, axes, chartTheme, 10);
 
     const { xaxis } = layout;
     const xDomain = [...(xaxis?.domain ?? [])];
-    chartUtils.updateLayoutAxes(layout, axes, axes, 1000);
+    chartUtils.updateLayoutAxes(layout, axes, axes, chartTheme, 1000);
 
     expect(layout.xaxis).toBe(xaxis);
     expect(xDomain).not.toBe(xaxis?.domain);
@@ -231,7 +236,7 @@ describe('updating layout axes', () => {
     const axes = makeTwinAxes();
     const chart = chartTestUtils.makeChart({ axes });
     const figure = chartTestUtils.makeFigure({ charts: [chart] });
-    chartUtils.updateFigureAxes(layout, figure);
+    chartUtils.updateFigureAxes(layout, figure, chartTheme);
     expect(layout).toEqual(
       expect.objectContaining({
         xaxis: expect.objectContaining({}),
@@ -241,7 +246,7 @@ describe('updating layout axes', () => {
     );
 
     axes.pop();
-    chartUtils.updateFigureAxes(layout, figure);
+    chartUtils.updateFigureAxes(layout, figure, chartTheme);
     expect(layout).toEqual(
       expect.objectContaining({
         xaxis: expect.objectContaining({}),
@@ -300,6 +305,7 @@ describe('updating layout axes', () => {
         layout,
         axes,
         figureAxes,
+        chartTheme,
         width,
         height,
         bounds
@@ -416,7 +422,7 @@ describe('handles subplots and columns/rows correctly', () => {
 describe('returns the axis layout ranges properly', () => {
   function makeLayout(layout) {
     return {
-      ...chartUtils.makeDefaultLayout(ChartTheme),
+      ...chartUtils.makeDefaultLayout(chartTheme),
       ...layout,
     };
   }
@@ -424,13 +430,13 @@ describe('returns the axis layout ranges properly', () => {
     expect(ChartUtils.getLayoutRanges(makeLayout(layout))).toEqual(ranges);
   }
 
-  const xaxis = chartUtils.makeLayoutAxis(dh.plot.AxisType.X);
+  const xaxis = chartUtils.makeLayoutAxis(dh.plot.AxisType.X, chartTheme);
   xaxis.range = [0, 1];
-  const xaxis2 = chartUtils.makeLayoutAxis(dh.plot.AxisType.X);
+  const xaxis2 = chartUtils.makeLayoutAxis(dh.plot.AxisType.X, chartTheme);
   xaxis2.range = [2, 3];
-  const yaxis = chartUtils.makeLayoutAxis(dh.plot.AxisType.Y);
+  const yaxis = chartUtils.makeLayoutAxis(dh.plot.AxisType.Y, chartTheme);
   yaxis.range = [4, 5];
-  const yaxis2 = chartUtils.makeLayoutAxis(dh.plot.AxisType.Y);
+  const yaxis2 = chartUtils.makeLayoutAxis(dh.plot.AxisType.Y, chartTheme);
   yaxis2.range = [6, 7];
 
   it('handles empty', () => {
diff --git a/packages/chart/src/ChartUtils.ts b/packages/chart/src/ChartUtils.ts
index a101a3d670..eb5973ad39 100644
--- a/packages/chart/src/ChartUtils.ts
+++ b/packages/chart/src/ChartUtils.ts
@@ -35,7 +35,7 @@ import type {
   MarkerSymbol,
 } from 'plotly.js';
 import { assertNotNull, Range } from '@deephaven/utils';
-import ChartTheme from './ChartTheme';
+import { ChartTheme } from './ChartTheme';
 
 export type FilterColumnMap = Map<
   string,
@@ -190,6 +190,7 @@ class ChartUtils {
    * @param x The main data array
    * @param xLow The absolute low values
    * @param xHigh
+   * @param theme Theme properties for the chart
    *
    * @returns The error_x object required by plotly, or null if none is required
    */
@@ -197,7 +198,7 @@ class ChartUtils {
     x: number[],
     xLow: number[],
     xHigh: number[],
-    theme = ChartTheme
+    theme: ChartTheme
   ): ErrorBar {
     const array = xHigh.map((value, i) => value - x[i]);
     const arrayminus = xLow.map((value, i) => x[i] - value);
@@ -505,7 +506,7 @@ class ChartUtils {
    * @param theme The theme to get colorway from
    * @returns Colorway array for the theme
    */
-  static getColorwayFromTheme(theme = ChartTheme): string[] {
+  static getColorwayFromTheme(theme: ChartTheme): string[] {
     let colorway: string[] = [];
     if (theme.colorway) {
       if (Array.isArray(theme.colorway)) {
@@ -851,8 +852,8 @@ class ChartUtils {
     series: Series,
     axisTypeMap: AxisTypeMap,
     seriesVisibility: boolean | 'legendonly',
-    showLegend: boolean | null = null,
-    theme = ChartTheme
+    theme: ChartTheme,
+    showLegend: boolean | null = null
   ): Partial<PlotData> {
     const {
       name,
@@ -932,7 +933,7 @@ class ChartUtils {
   addStylingToSeriesData(
     seriesDataParam: Partial<PlotData>,
     plotStyle: SeriesPlotStyle,
-    theme: typeof ChartTheme = ChartTheme,
+    theme: ChartTheme,
     lineColor: string | null = null,
     shapeColor: string | null = null,
     shape: string | null = null,
@@ -1078,18 +1079,18 @@ class ChartUtils {
    * Update the layout with all the axes information for the provided figure
    * @param figure Figure to update the axes for
    * @param layoutParam Layout object to update in place
+   * @param theme Theme used for displaying the plot
    * @param chartAxisRangeParser Function to retrieve the axis range parser
    * @param plotWidth Width of the plot in pixels
    * @param plotHeight Height of the plot in pixels
-   * @param theme Theme used for displaying the plot
    */
   updateFigureAxes(
     layoutParam: Partial<Layout>,
     figure: Figure,
+    theme: ChartTheme,
     chartAxisRangeParser?: ChartAxisRangeParser,
     plotWidth = 0,
-    plotHeight = 0,
-    theme = ChartTheme
+    plotHeight = 0
   ): void {
     const layout = layoutParam;
     const figureAxes = ChartUtils.getAllAxes(figure);
@@ -1101,11 +1102,11 @@ class ChartUtils {
         layout,
         chart.axes,
         figureAxes,
+        theme,
         plotWidth,
         plotHeight,
         bounds,
-        axisRangeParser,
-        theme
+        axisRangeParser
       );
     }
 
@@ -1275,6 +1276,7 @@ class ChartUtils {
    * @param layoutParam The layout object to update
    * @param chartAxes The chart axes to update the layout with
    * @param figureAxes All figure axes to update the layout with
+   * @param theme Theme used for displaying the plot
    * @param plotWidth The width of the plot to calculate the axis sizes for
    * @param plotHeight The height of the plot to calculate the axis sizes for
    * @param bounds The bounds for this set of axes
@@ -1284,11 +1286,11 @@ class ChartUtils {
     layoutParam: Partial<Layout>,
     chartAxes: Axis[],
     figureAxes: Axis[],
+    theme: ChartTheme,
     plotWidth = 0,
     plotHeight = 0,
     bounds: ChartBounds = { left: 0, top: 0, right: 1, bottom: 1 },
-    axisRangeParser?: AxisRangeParser,
-    theme = ChartTheme
+    axisRangeParser?: AxisRangeParser
   ): void {
     const { dh } = this;
     const xAxisSize =
@@ -1826,7 +1828,7 @@ class ChartUtils {
     return value;
   }
 
-  makeLayoutAxis(type: AxisType, theme = ChartTheme): Partial<LayoutAxis> {
+  makeLayoutAxis(type: AxisType, theme: ChartTheme): Partial<LayoutAxis> {
     const { dh } = this;
     const axis = {
       automargin: true,
@@ -1860,7 +1862,7 @@ class ChartUtils {
     return axis;
   }
 
-  makeDefaultLayout(theme = ChartTheme): Partial<Layout> {
+  makeDefaultLayout(theme: ChartTheme): Partial<Layout> {
     const { dh } = this;
     const layout: Partial<Layout> = {
       ...theme,
diff --git a/packages/chart/src/FigureChartModel.test.ts b/packages/chart/src/FigureChartModel.test.ts
index b9fdd25c17..18857886c5 100644
--- a/packages/chart/src/FigureChartModel.test.ts
+++ b/packages/chart/src/FigureChartModel.test.ts
@@ -1,11 +1,15 @@
 import dh from '@deephaven/jsapi-shim';
+import { TestUtils } from '@deephaven/utils';
 import { PlotData } from 'plotly.js';
 import ChartTestUtils from './ChartTestUtils';
+import type { ChartTheme } from './ChartTheme';
 import FigureChartModel from './FigureChartModel';
 
+const { createMockProxy } = TestUtils;
 const chartTestUtils = new ChartTestUtils(dh);
 
 beforeEach(() => {
+  jest.clearAllMocks();
   jest.useFakeTimers();
 });
 
@@ -13,9 +17,11 @@ afterEach(() => {
   jest.useRealTimers();
 });
 
+const chartTheme = createMockProxy<ChartTheme>();
+
 it('populates the layout properly', () => {
   const figure = chartTestUtils.makeFigure();
-  const model = new FigureChartModel(dh, figure);
+  const model = new FigureChartModel(dh, figure, chartTheme);
 
   expect(model.getLayout()).toEqual(
     expect.objectContaining({
@@ -38,7 +44,7 @@ it('populates the layout properly', () => {
 
 it('populates series data properly', () => {
   const figure = chartTestUtils.makeFigure();
-  const model = new FigureChartModel(dh, figure);
+  const model = new FigureChartModel(dh, figure, chartTheme);
 
   expect(model.getData()).toEqual([
     expect.objectContaining({
@@ -62,7 +68,7 @@ it('populates horizontal series properly', () => {
   const chart = chartTestUtils.makeChart({ series: [series], axes });
   const figure = chartTestUtils.makeFigure({ charts: [chart] });
 
-  const model = new FigureChartModel(dh, figure);
+  const model = new FigureChartModel(dh, figure, chartTheme);
 
   expect(model.getData()).toEqual([
     expect.objectContaining({ orientation: 'h' }),
@@ -75,7 +81,7 @@ it('converts histograms properly to bars', () => {
   });
   const chart = chartTestUtils.makeChart({ series: [series] });
   const figure = chartTestUtils.makeFigure({ charts: [chart] });
-  const model = new FigureChartModel(dh, figure);
+  const model = new FigureChartModel(dh, figure, chartTheme);
 
   expect(model.getData()).toEqual([
     expect.objectContaining({
@@ -100,7 +106,7 @@ it('handles colors on line charts properly', () => {
   });
   const chart = chartTestUtils.makeChart({ series: [series] });
   const figure = chartTestUtils.makeFigure({ charts: [chart] });
-  const model = new FigureChartModel(dh, figure);
+  const model = new FigureChartModel(dh, figure, chartTheme);
 
   expect(model.getData()).toEqual([
     expect.objectContaining({
@@ -122,7 +128,7 @@ it('handles colors on bar charts properly', () => {
   });
   const chart = chartTestUtils.makeChart({ series: [series] });
   const figure = chartTestUtils.makeFigure({ charts: [chart] });
-  const model = new FigureChartModel(dh, figure);
+  const model = new FigureChartModel(dh, figure, chartTheme);
 
   expect(model.getData()).toEqual([
     expect.objectContaining({
@@ -149,7 +155,7 @@ describe('axis transform tests', () => {
     const series = chartTestUtils.makeSeries({ sources });
     const chart = chartTestUtils.makeChart({ series: [series], axes });
     const figure = chartTestUtils.makeFigure({ charts: [chart] });
-    const model = new FigureChartModel(dh, figure);
+    const model = new FigureChartModel(dh, figure, chartTheme);
 
     expect(model.getLayout().xaxis).toMatchObject({
       type: 'log',
@@ -174,7 +180,7 @@ describe('axis transform tests', () => {
     const series = chartTestUtils.makeSeries({ sources });
     const chart = chartTestUtils.makeChart({ series: [series], axes });
     const figure = chartTestUtils.makeFigure({ charts: [chart] });
-    const model = new FigureChartModel(dh, figure);
+    const model = new FigureChartModel(dh, figure, chartTheme);
 
     expect(model.getLayout().xaxis).not.toMatchObject({
       type: 'log',
@@ -208,7 +214,7 @@ describe('multiple axes', () => {
 
     const chart = chartTestUtils.makeChart({ axes });
     const figure = chartTestUtils.makeFigure({ charts: [chart] });
-    const model = new FigureChartModel(dh, figure);
+    const model = new FigureChartModel(dh, figure, chartTheme);
 
     const layout = model.getLayout();
 
@@ -264,7 +270,7 @@ describe('multiple axes', () => {
 
     const chart = chartTestUtils.makeChart({ axes });
     const figure = chartTestUtils.makeFigure({ charts: [chart] });
-    const model = new FigureChartModel(dh, figure);
+    const model = new FigureChartModel(dh, figure, chartTheme);
 
     const layout = model.getLayout();
 
@@ -326,7 +332,7 @@ describe('multiple axes', () => {
 
     const chart = chartTestUtils.makeChart({ axes });
     const figure = chartTestUtils.makeFigure({ charts: [chart] });
-    const model = new FigureChartModel(dh, figure);
+    const model = new FigureChartModel(dh, figure, chartTheme);
 
     const layout = model.getLayout();
 
@@ -382,7 +388,7 @@ describe('multiple axes', () => {
 
     const chart = chartTestUtils.makeChart({ axes });
     const figure = chartTestUtils.makeFigure({ charts: [chart] });
-    const model = new FigureChartModel(dh, figure);
+    const model = new FigureChartModel(dh, figure, chartTheme);
 
     const layout = model.getLayout();
 
@@ -429,7 +435,7 @@ it('adds new series', () => {
   const figure = chartTestUtils.makeFigure({
     charts: [chart],
   });
-  const model = new FigureChartModel(dh, figure);
+  const model = new FigureChartModel(dh, figure, chartTheme);
   model.subscribe(jest.fn());
 
   expect(model.getData()).toEqual([
@@ -465,7 +471,7 @@ describe('legend visibility', () => {
     const figure = chartTestUtils.makeFigure({
       charts: [chart],
     });
-    const model = new FigureChartModel(dh, figure);
+    const model = new FigureChartModel(dh, figure, chartTheme);
     model.subscribe(jest.fn());
 
     return model.getData();
diff --git a/packages/chart/src/FigureChartModel.ts b/packages/chart/src/FigureChartModel.ts
index 9a2d58ea29..42dbfcbf1c 100644
--- a/packages/chart/src/FigureChartModel.ts
+++ b/packages/chart/src/FigureChartModel.ts
@@ -25,7 +25,7 @@ import ChartUtils, {
   FilterColumnMap,
   FilterMap,
 } from './ChartUtils';
-import ChartTheme from './ChartTheme';
+import { ChartTheme } from './ChartTheme';
 
 const log = Log.module('FigureChartModel');
 
@@ -38,13 +38,14 @@ class FigureChartModel extends ChartModel {
   /**
    * @param dh JSAPI instance
    * @param figure The figure object created by the API
+   * @param theme The theme for the figure
    * @param settings Chart settings
    */
   constructor(
     dh: DhType,
     figure: Figure,
-    settings: Partial<ChartModelSettings> = {},
-    theme: typeof ChartTheme = ChartTheme
+    theme: ChartTheme,
+    settings: Partial<ChartModelSettings> = {}
   ) {
     super(dh);
 
@@ -98,7 +99,7 @@ class FigureChartModel extends ChartModel {
 
   settings: Partial<ChartModelSettings>;
 
-  theme: typeof ChartTheme;
+  theme: ChartTheme;
 
   data: Partial<Data>[];
 
@@ -184,8 +185,8 @@ class FigureChartModel extends ChartModel {
       series,
       axisTypeMap,
       ChartUtils.getSeriesVisibility(series.name, this.settings),
-      showLegend,
-      this.theme
+      this.theme,
+      showLegend
     );
 
     this.seriesDataMap.set(series.name, seriesData);
@@ -600,10 +601,10 @@ class FigureChartModel extends ChartModel {
     this.chartUtils.updateFigureAxes(
       this.layout,
       this.figure,
+      this.theme,
       chart => this.getAxisRangeParser(chart, this.formatter),
       plotWidth,
-      plotHeight,
-      this.theme
+      plotHeight
     );
   }
 
@@ -688,14 +689,16 @@ class FigureChartModel extends ChartModel {
         seriesData.error_x = ChartUtils.getPlotlyErrorBars(
           x as number[],
           xLow,
-          xHigh
+          xHigh,
+          this.theme
         );
       }
       if (yLow && yHigh && yLow !== y) {
         seriesData.error_y = ChartUtils.getPlotlyErrorBars(
           y as number[],
           yLow,
-          yHigh
+          yHigh,
+          this.theme
         );
       }
     } else if (plotStyle === dh.plot.SeriesPlotStyle.TREEMAP) {
diff --git a/packages/chart/src/MockChartModel.ts b/packages/chart/src/MockChartModel.ts
index 08b0d152ef..b8910bb063 100644
--- a/packages/chart/src/MockChartModel.ts
+++ b/packages/chart/src/MockChartModel.ts
@@ -4,7 +4,7 @@
 import type { dh as DhType } from '@deephaven/jsapi-types';
 import type { Datum, Layout, PlotData } from 'plotly.js';
 import ChartModel from './ChartModel';
-import ChartTheme from './ChartTheme';
+import { ChartTheme, defaultChartTheme } from './ChartTheme';
 import ChartUtils from './ChartUtils';
 
 interface Series {
@@ -18,6 +18,18 @@ interface Series {
 class MockChartModel extends ChartModel {
   static smoothing = 1.5;
 
+  static _theme: ChartTheme;
+
+  static get theme(): ChartTheme {
+    /* eslint-disable no-underscore-dangle */
+    if (MockChartModel._theme == null) {
+      MockChartModel._theme = defaultChartTheme();
+    }
+
+    return MockChartModel._theme;
+    /* eslint-enable no-underscore-dangle */
+  }
+
   static makeRandomSeries(offset: number, scale = 1, steps = 100): Series {
     const dates = [];
     const values = [];
@@ -62,7 +74,7 @@ class MockChartModel extends ChartModel {
       name: 'SCTR',
       x: series.x,
       y: series.y,
-      type: 'scattergl',
+      type: 'scatter',
       mode: 'markers',
       hoverinfo: 'skip',
       marker: {
@@ -81,7 +93,7 @@ class MockChartModel extends ChartModel {
       fill: 'tozeroy',
       hoverinfo: 'all',
       line: {
-        color: ChartTheme.area_color,
+        color: MockChartModel.theme.area_color,
         width: 3,
         // area patten gets applied as hack in post render plot.ly callback + css
       },
@@ -94,13 +106,13 @@ class MockChartModel extends ChartModel {
       name: 'Trendline <br>R<sup>2</sup> = 0.91',
       x: series.x,
       y: series.l,
-      type: 'scattergl',
+      type: 'scatter',
       mode: 'line' as PlotData['mode'],
       hoverinfo: 'skip',
       line: {
         width: 3,
         dash: 'dot', // trendlines should follow some sort of color convention + dots/dashed. Remember there can multiple
-        color: ChartTheme.trend_color,
+        color: MockChartModel.theme.trend_color,
         // chroma(c.$green).brighten(1.2).hex()
       },
     };
@@ -123,14 +135,14 @@ class MockChartModel extends ChartModel {
       name: 'error',
       x: (series.x as Datum[]).concat((series.x as Datum[]).slice().reverse()), // winding for x values, that slice just clones so reverse doesn't apply inplace
       y: errory,
-      type: 'scattergl',
+      type: 'scatter',
       mode: 'line' as PlotData['mode'],
       hoverinfo: 'skip',
       fill: 'toself', // there's some ordering bug with scattergl where if the areas traces are ordered after the lines they don't render
-      fillcolor: ChartTheme.error_band_fill_color,
+      fillcolor: MockChartModel.theme.error_band_fill_color,
       line: {
         width: 0,
-        color: ChartTheme.error_band_line_color,
+        color: MockChartModel.theme.error_band_line_color,
         shape: 'spline',
       },
     };
@@ -141,11 +153,11 @@ class MockChartModel extends ChartModel {
       name: 'LINE',
       x: series.x,
       y: series.y,
-      type: 'scattergl',
+      type: 'scatter',
       mode: 'line' as PlotData['mode'],
       hoverinfo: 'x+y+text+name' as PlotData['hoverinfo'],
       line: {
-        color: ChartTheme.line_color,
+        color: MockChartModel.theme.line_color,
         width: 3,
       },
     };
@@ -164,7 +176,7 @@ class MockChartModel extends ChartModel {
   }
 
   static makeDefaultLayout(dh: DhType): Partial<Layout> {
-    const layout = new ChartUtils(dh).makeDefaultLayout(ChartTheme);
+    const layout = new ChartUtils(dh).makeDefaultLayout(MockChartModel.theme);
     layout.title = 'Chart';
 
     if (layout.xaxis) {
diff --git a/packages/chart/src/__snapshots__/ChartTheme.test.ts.snap b/packages/chart/src/__snapshots__/ChartTheme.test.ts.snap
new file mode 100644
index 0000000000..09c0225076
--- /dev/null
+++ b/packages/chart/src/__snapshots__/ChartTheme.test.ts.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`defaultChartTheme should create the default chart theme 1`] = `
+{
+  "activecolor": "chartTheme['activecolor']",
+  "area_color": "chartTheme['area-color']",
+  "colorway": "chartTheme['colorway']",
+  "error_band_fill_color": "chartTheme['error-band-fill-color']",
+  "error_band_line_color": "chartTheme['error-band-line-color']",
+  "gridcolor": "chartTheme['gridcolor']",
+  "line_color": "chartTheme['line-color']",
+  "linecolor": "chartTheme['linecolor']",
+  "ohlc_decreasing": "chartTheme['ohlc-decreasing']",
+  "ohlc_increasing": "chartTheme['ohlc-increasing']",
+  "paper_bgcolor": "chartTheme['paper-bgcolor']",
+  "plot_bgcolor": "chartTheme['plot-bgcolor']",
+  "rangebgcolor": "chartTheme['rangebgcolor']",
+  "title_color": "chartTheme['title-color']",
+  "trend_color": "chartTheme['trend-color']",
+  "zerolinecolor": "chartTheme['zerolinecolor']",
+}
+`;
diff --git a/packages/chart/src/index.ts b/packages/chart/src/index.ts
index 00aac09628..0959cc5d2f 100644
--- a/packages/chart/src/index.ts
+++ b/packages/chart/src/index.ts
@@ -6,5 +6,7 @@ export * from './ChartUtils';
 export { default as FigureChartModel } from './FigureChartModel';
 export { default as MockChartModel } from './MockChartModel';
 export { default as Plot } from './plotly/Plot';
-export { default as ChartTheme } from './ChartTheme';
+export * from './ChartTheme';
+export * from './ChartThemeProvider';
 export { default as isFigureChartModel } from './isFigureChartModel';
+export * from './useChartTheme';
diff --git a/packages/chart/src/plotly/Plot.ts b/packages/chart/src/plotly/Plot.ts
index 9bd6f2d28c..94afe090e0 100644
--- a/packages/chart/src/plotly/Plot.ts
+++ b/packages/chart/src/plotly/Plot.ts
@@ -1,16 +1,7 @@
 // Import the react customizable bundle for building, only pull in the modules we need
 // This reduces the build size. Plotly has a lot of modules we don't need/use.
 // https://github.com/plotly/react-plotly.js#customizing-the-plotlyjs-bundle
-import createPlotlyComponent from 'react-plotly.js/factory.js';
+import createPlotlyComponent from './createPlotlyComponent';
 import Plotly from './Plotly';
 
-// Webpack 5 (used in docusaurus) gives an object w/ a default key
-// This is probably something on react-plotly.js's side
-// Or because we lazy load this and Docusaurus ends up w/ some complications between ESM and CJS
-export default typeof createPlotlyComponent === 'function'
-  ? createPlotlyComponent(Plotly)
-  : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    (createPlotlyComponent.default(Plotly) as ReturnType<
-      typeof createPlotlyComponent
-    >);
+export default createPlotlyComponent(Plotly);
diff --git a/packages/chart/src/plotly/createPlotlyComponent.ts b/packages/chart/src/plotly/createPlotlyComponent.ts
new file mode 100644
index 0000000000..04e1f8f656
--- /dev/null
+++ b/packages/chart/src/plotly/createPlotlyComponent.ts
@@ -0,0 +1,13 @@
+// Import the react customizable bundle for building, only pull in the modules we need
+// This reduces the build size. Plotly has a lot of modules we don't need/use.
+// https://github.com/plotly/react-plotly.js#customizing-the-plotlyjs-bundle
+import createPlotlyComponent from 'react-plotly.js/factory.js';
+
+// Webpack 5 (used in docusaurus) gives an object w/ a default key
+// This is probably something on react-plotly.js's side
+// Or because we lazy load this and Docusaurus ends up w/ some complications between ESM and CJS
+export default typeof createPlotlyComponent === 'function'
+  ? createPlotlyComponent
+  : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    (createPlotlyComponent.default as typeof createPlotlyComponent);
diff --git a/packages/chart/src/useChartTheme.tsx b/packages/chart/src/useChartTheme.tsx
new file mode 100644
index 0000000000..c3a6eb0004
--- /dev/null
+++ b/packages/chart/src/useChartTheme.tsx
@@ -0,0 +1,18 @@
+import { useContextOrThrow } from '@deephaven/react-hooks';
+
+import {
+  ChartThemeContext,
+  ChartThemeContextValue,
+} from './ChartThemeProvider';
+
+/**
+ * Hook to get the current `ChartThemeContextValue`.
+ */
+export function useChartTheme(): ChartThemeContextValue {
+  return useContextOrThrow(
+    ChartThemeContext,
+    'No ChartThemeContext value found.'
+  );
+}
+
+export default useChartTheme;
diff --git a/packages/chart/tsconfig.json b/packages/chart/tsconfig.json
index 5bc027b10c..ea693b3b92 100644
--- a/packages/chart/tsconfig.json
+++ b/packages/chart/tsconfig.json
@@ -4,15 +4,12 @@
     "rootDir": "src/",
     "outDir": "dist/"
   },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.js",
-    "src/**/*.jsx",
-    "declaration.d.ts"
-  ],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"],
   "exclude": ["node_modules", "src/**/*.test.*", "src/**/__mocks__/*"],
   "references": [
+    {
+      "path": "../components"
+    },
     {
       "path": "../jsapi-shim"
     },
@@ -22,6 +19,9 @@
     {
       "path": "../log"
     },
+    {
+      "path": "../react-hooks"
+    },
     {
       "path": "../utils"
     }
diff --git a/packages/code-studio/src/styleguide/ThemeColors.tsx b/packages/code-studio/src/styleguide/ThemeColors.tsx
index dc7ba764cf..98f2dca586 100644
--- a/packages/code-studio/src/styleguide/ThemeColors.tsx
+++ b/packages/code-studio/src/styleguide/ThemeColors.tsx
@@ -3,6 +3,7 @@ import { Tooltip } from '@deephaven/components';
 import { ColorUtils } from '@deephaven/utils';
 import palette from '@deephaven/components/src/theme/theme-dark/theme-dark-palette.css?inline';
 import semantic from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic.css?inline';
+import chart from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-chart.css?inline';
 import semanticEditor from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-editor.css?inline';
 import semanticGrid from '@deephaven/components/src/theme/theme-dark/theme-dark-semantic-grid.css?inline';
 import components from '@deephaven/components/src/theme/theme-dark/theme-dark-components.css?inline';
@@ -14,6 +15,11 @@ import styles from './ThemeColors.module.scss';
 const reassignVarGroups: Record<string, string> = {
   '--dh-color-black': 'gray',
   '--dh-color-white': 'gray',
+  // Semantic
+  '--dh-color-visual-positive': 'Visual Status',
+  '--dh-color-visual-negative': 'Visual Status',
+  '--dh-color-visual-notice': 'Visual Status',
+  '--dh-color-visual-info': 'Visual Status',
   // Editor
   '--dh-color-editor-bg': 'editor',
   '--dh-color-editor-fg': 'editor',
@@ -45,6 +51,18 @@ const renameGroups = {
     selection: 'state',
     focus: 'state',
   },
+  chart: {
+    axis: 'Chart',
+    bg: 'Chart',
+    grid: 'Chart',
+    plot: 'Chart',
+    title: 'Chart',
+    active: 'Data',
+    trend: 'Data',
+    area: 'Data',
+    range: 'Data',
+    line: 'Deprecated',
+  },
   grid: { data: 'Data Bars', context: 'Context Menu' },
   semantic: {
     positive: 'status',
@@ -60,6 +78,7 @@ export function ThemeColors(): JSX.Element {
     () => ({
       'Theme Color Palette': buildColorGroups(palette, 1),
       'Semantic Colors': buildColorGroups(semantic, 1, renameGroups.semantic),
+      'Chart Colors': buildColorGroups(chart, 2, renameGroups.chart),
       'Editor Colors': buildColorGroups(semanticEditor, 2, renameGroups.editor),
       'Grid Colors': buildColorGroups(semanticGrid, 2, renameGroups.grid),
       'Component Colors': buildColorGroups(components, 1),
@@ -141,11 +160,32 @@ function extractColorVars(
   return styleText
     .split('\n')
     .map(line => /^\s{2}(--dh-color-(?:[^:]+))/.exec(line)?.[1])
-    .filter(Boolean)
-    .map(varName =>
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      ({ name: varName!, value: computedStyle.getPropertyValue(varName!)! })
-    );
+    .filter((match): match is string => Boolean(match))
+    .map(varName => {
+      const value = computedStyle.getPropertyValue(varName);
+
+      // Chart colorway consists of multiple colors, so split into separate
+      // swatches for illustration. Note that this assumes the colors are hsl
+      // values. We'll need to make this more robust if we ever change the
+      // default themes to use non-hsl.
+      if (varName === '--dh-color-chart-colorway') {
+        const colorwayColors = value
+          .split('hsl')
+          .filter(Boolean)
+          .map(v => `hsl${v.trim()}`);
+
+        return colorwayColors.map((varExp, i) => ({
+          name: `${varName}-${i}`,
+          value: varExp,
+        }));
+      }
+
+      return {
+        name: varName,
+        value,
+      };
+    })
+    .flat();
 }
 
 /** Group color data based on capture group value */
diff --git a/packages/components/src/theme/ThemeUtils.test.ts b/packages/components/src/theme/ThemeUtils.test.ts
index b0656a1dde..80e5234e8d 100644
--- a/packages/components/src/theme/ThemeUtils.test.ts
+++ b/packages/components/src/theme/ThemeUtils.test.ts
@@ -10,8 +10,8 @@ import {
   calculatePreloadStyleContent,
   extractDistinctCssVariableExpressions,
   getActiveThemes,
-  getCssVariableRanges,
   getDefaultBaseThemes,
+  getExpressionRanges,
   getThemeKey,
   getThemePreloadData,
   preloadTheme,
@@ -138,11 +138,20 @@ describe('getActiveThemes', () => {
   });
 });
 
-describe('getCssVariableRanges', () => {
-  const t = [
-    ['Single var', 'var(--aaa-aa)', [[0, 12]]],
+describe('getExpressionRanges', () => {
+  const testCases = [
+    ['Single expression', '#ffffff', [[0, 6]]],
+    ['Single var expression', 'var(--aaa-aa)', [[0, 12]]],
     [
-      'Multiple vars',
+      'Multiple expressions',
+      '#ffffff #ffffff',
+      [
+        [0, 6],
+        [8, 14],
+      ],
+    ],
+    [
+      'Multiple var expressions',
       'var(--aaa-aa) var(--bbb-bb)',
       [
         [0, 12],
@@ -150,20 +159,33 @@ describe('getCssVariableRanges', () => {
       ],
     ],
     [
-      'Nested vars - level 2',
+      'Mixed expressions',
+      ' var(--aaa-aa)\n   #fff \n\n var(--bbb-bb)  \n  ',
+      [
+        [1, 13],
+        [18, 21],
+        [26, 38],
+      ],
+    ],
+    [
+      'Nested expressions - level 2',
       'var(--ccc-cc, var(--aaa-aa, green)) var(--bbb-bb)',
       [
         [0, 34],
         [36, 48],
       ],
     ],
-    ['Nested vars - level 3', 'var(--a, var(--b, var(--c, red)))', [[0, 32]]],
     [
-      'Nested vars - level 4',
-      'var(--a, var(--b, var(--c, var(--d, red)))) var(--e, var(--f, var(--g, var(--h, red))))',
+      'Nested expressions - level 3',
+      'var(--a, var(--b, var(--c, red)))',
+      [[0, 32]],
+    ],
+    [
+      'Nested expressions - level 4',
+      'var(--a, var(--b, \n var(--c, var(--d, red)))) \n\t\n var(--e, var(--f, var(--g, var(--h, red))))   \n  \t',
       [
-        [0, 42],
-        [44, 86],
+        [0, 44],
+        [50, 92],
       ],
     ],
     ['Nested calc - level 3', 'var(--a, calc(calc(1px + 2px)))', [[0, 30]]],
@@ -175,11 +197,10 @@ describe('getCssVariableRanges', () => {
     ['Unbalanced', 'var(--a', []],
   ] as const;
 
-  it.each(t)(
-    'should return the css variable ranges - %s: %s, %s',
-    (_label, given, expected) => {
-      const actual = getCssVariableRanges(given);
-      expect(actual).toEqual(expected);
+  it.each(testCases)(
+    'should return top-level expression ranges: %s, %s',
+    (_, given, expected) => {
+      expect(getExpressionRanges(given)).toEqual(expected);
     }
   );
 });
@@ -194,6 +215,7 @@ describe('getDefaultBaseThemes', () => {
         styleContent: [
           './theme-dark-palette.css?raw',
           './theme-dark-semantic.css?raw',
+          './theme-dark-semantic-chart.css?raw',
           './theme-dark-semantic-editor.css?raw',
           './theme-dark-semantic-grid.css?raw',
           './theme-dark-components.css?raw',
@@ -410,7 +432,7 @@ describe('resolveCssVariablesInString', () => {
     [
       'Non top-level var',
       'calc(var(--a, calc(calc(calc(1px + 2px) + 3px)))) var(--b)',
-      'calc(R[var(--a, calc(calc(calc(1px + 2px) + 3px)))]) R[var(--b)]',
+      'R[calc(var(--a, calc(calc(calc(1px + 2px) + 3px))))] R[var(--b)]',
     ],
   ])('should replace css variables - %s: %s, %s', (_label, given, expected) => {
     const actual = resolveCssVariablesInString(mockResolver, given);
diff --git a/packages/components/src/theme/ThemeUtils.ts b/packages/components/src/theme/ThemeUtils.ts
index f1bb6fd6b2..85eec63020 100644
--- a/packages/components/src/theme/ThemeUtils.ts
+++ b/packages/components/src/theme/ThemeUtils.ts
@@ -27,7 +27,10 @@ import {
 
 const log = Log.module('ThemeUtils');
 
+export const CSS_VAR_EXPRESSION_PREFIX = 'var(--';
 export const TMP_CSS_PROP_PREFIX = 'dh-tmp';
+export const NON_WHITESPACE_REGEX = /\S/;
+export const WHITESPACE_REGEX = /\s/;
 
 export type VarExpressionResolver = (varExpression: string) => string;
 
@@ -60,8 +63,12 @@ export function extractDistinctCssVariableExpressions(
   const set = new Set<string>();
 
   Object.values(record).forEach(value => {
-    getCssVariableRanges(value).forEach(([start, end]) => {
-      set.add(value.substring(start, end + 1));
+    getExpressionRanges(value).forEach(([start, end]) => {
+      const expression = value.substring(start, end + 1);
+
+      if (expression.includes(CSS_VAR_EXPRESSION_PREFIX)) {
+        set.add(expression);
+      }
     });
   });
 
@@ -143,59 +150,61 @@ export function getThemePreloadData(): ThemePreloadData | null {
 }
 
 /**
- * Identifies start and end indices of any css variable expressions in the given
+ * Identifies start and end indices of any top-level expressions in the given
  * string.
  *
  * e.g.
- * getCssVariableRanges('var(--aaa-aa) var(--bbb-bb)')
+ * getExpressionRanges('var(--aaa-aa) #fff var(--bbb-bb)')
  * yields:
  * [
- *   [0, 12],
- *   [14, 26],
+ *   [0, 12],  // 'var(--aaa-aa)'
+ *   [14, 17]  // '#fff'
+ *   [19, 31], // 'var(--bbb-bb)'
  * ]
  *
  * In cases where there are nested expressions, only the indices of the outermost
  * expression will be included.
  *
  * e.g.
- * getCssVariableRanges('var(--ccc-cc, var(--aaa-aa, green)) var(--bbb-bb)')
+ * getExpressionRanges('var(--ccc-cc, var(--aaa-aa, green)) var(--bbb-bb)')
  * yields:
  * [
- *   [0, 34], // range for --ccc-cc expression
- *   [36, 48], // range for --bbb-bb expression
+ *   [0, 34],  // 'var(--ccc-cc, var(--aaa-aa, green))'
+ *   [36, 48], // 'var(--bbb-bb)'
  * ]
- * @param value The string to search for css variable expressions
- * @returns An array of [start, end] index pairs for each css variable expression
+ * @param value The string to search for expressions
+ * @returns An array of [start, end] index pairs for each expression
  */
-export function getCssVariableRanges(value: string): [number, number][] {
+export function getExpressionRanges(value: string): [number, number][] {
   const ranges: [number, number][] = [];
 
-  const cssVarPrefix = 'var(--';
-  let start = value.indexOf(cssVarPrefix);
+  let start = NON_WHITESPACE_REGEX.exec(value)?.index ?? 0;
   let parenLevel = 0;
 
-  while (start > -1) {
-    parenLevel = 1;
-    let i = start + cssVarPrefix.length;
-    for (; i < value.length; i += 1) {
-      if (value[i] === '(') {
-        parenLevel += 1;
-      } else if (value[i] === ')') {
-        parenLevel -= 1;
-      }
+  for (let i = 0; i < value.length; i += 1) {
+    if (value[i] === '(') {
+      parenLevel += 1;
+    } else if (value[i] === ')') {
+      parenLevel -= 1;
+    }
+
+    if (
+      i === value.length - 1 ||
+      (WHITESPACE_REGEX.test(value[i + 1]) && parenLevel === 0)
+    ) {
+      ranges.push([start, i]);
 
-      if (parenLevel === 0) {
-        ranges.push([start, i]);
-        break;
+      while (i < value.length - 1 && WHITESPACE_REGEX.test(value[i + 1])) {
+        i += 1;
       }
-    }
 
-    if (parenLevel !== 0) {
-      log.error('Unbalanced parentheses in css var expression', value);
-      return [];
+      start = i + 1;
     }
+  }
 
-    start = value.indexOf(cssVarPrefix, i + 1);
+  if (parenLevel !== 0) {
+    log.error('Unbalanced parentheses in css var expression', value);
+    return [];
   }
 
   return ranges;
@@ -280,13 +289,19 @@ export function resolveCssVariablesInString(
 ): string {
   const result: string[] = [];
   let i = 0;
-  getCssVariableRanges(value).forEach(([start, end]) => {
+  getExpressionRanges(value).forEach(([start, end]) => {
     if (i < start) {
       result.push(value.substring(i, start));
       i += start - i;
     }
 
-    result.push(resolver(value.substring(start, end + 1)));
+    const expression = value.substring(start, end + 1);
+
+    result.push(
+      expression.includes(CSS_VAR_EXPRESSION_PREFIX)
+        ? resolver(expression)
+        : expression
+    );
 
     i += end - start + 1;
   });
diff --git a/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap b/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap
index 274a256866..08b0d193d9 100644
--- a/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap
+++ b/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap
@@ -30,6 +30,7 @@ exports[`ThemeProvider setSelectedThemeKey: [ [Object] ] should change selected
     >
       ./theme-dark-palette.css?raw
 ./theme-dark-semantic.css?raw
+./theme-dark-semantic-chart.css?raw
 ./theme-dark-semantic-editor.css?raw
 ./theme-dark-semantic-grid.css?raw
 ./theme-dark-components.css?raw
@@ -93,6 +94,7 @@ exports[`ThemeProvider should load themes based on preload data or default: [ [O
     >
       ./theme-dark-palette.css?raw
 ./theme-dark-semantic.css?raw
+./theme-dark-semantic-chart.css?raw
 ./theme-dark-semantic-editor.css?raw
 ./theme-dark-semantic-grid.css?raw
 ./theme-dark-components.css?raw
@@ -122,6 +124,7 @@ exports[`ThemeProvider should load themes based on preload data or default: [ [O
     >
       ./theme-dark-palette.css?raw
 ./theme-dark-semantic.css?raw
+./theme-dark-semantic-chart.css?raw
 ./theme-dark-semantic-editor.css?raw
 ./theme-dark-semantic-grid.css?raw
 ./theme-dark-components.css?raw
diff --git a/packages/components/src/theme/theme-dark/index.ts b/packages/components/src/theme/theme-dark/index.ts
index c724fa562b..e6d8937ee5 100644
--- a/packages/components/src/theme/theme-dark/index.ts
+++ b/packages/components/src/theme/theme-dark/index.ts
@@ -1,5 +1,6 @@
 import themeDarkPalette from './theme-dark-palette.css?raw';
 import themeDarkSemantic from './theme-dark-semantic.css?raw';
+import themeDarkSemanticChart from './theme-dark-semantic-chart.css?raw';
 import themeDarkSemanticEditor from './theme-dark-semantic-editor.css?raw';
 import themeDarkSemanticGrid from './theme-dark-semantic-grid.css?raw';
 import themeDarkComponents from './theme-dark-components.css?raw';
@@ -44,6 +45,7 @@ import themeDarkComponents from './theme-dark-components.css?raw';
 export const themeDark = [
   themeDarkPalette,
   themeDarkSemantic,
+  themeDarkSemanticChart,
   themeDarkSemanticEditor,
   themeDarkSemanticGrid,
   themeDarkComponents,
diff --git a/packages/components/src/theme/theme-dark/theme-dark-semantic-chart.css b/packages/components/src/theme/theme-dark/theme-dark-semantic-chart.css
new file mode 100644
index 0000000000..8b22a15fb0
--- /dev/null
+++ b/packages/components/src/theme/theme-dark/theme-dark-semantic-chart.css
@@ -0,0 +1,46 @@
+/* stylelint-disable alpha-value-notation */
+/* stylelint-disable custom-property-empty-line-before */
+:root {
+  --dh-color-chart-bg: var(--dh-color-content-background);
+  --dh-color-chart-plot-bg: var(--dh-color-gray-200);
+  --dh-color-chart-title: var(--dh-color-white);
+
+  /* Colorway */
+  --dh-color-chart-colorway: var(--dh-color-visual-cyan)
+    var(--dh-color-visual-green) var(--dh-color-visual-yellow)
+    var(--dh-color-visual-purple) var(--dh-color-visual-orange)
+    var(--dh-color-visual-red) var(--dh-color-visual-chartreuse)
+    var(--dh-color-visual-fuchsia) var(--dh-color-visual-seafoam)
+    var(--dh-color-visual-magenta) var(--dh-color-white);
+  --dh-color-chart-grid: var(--dh-color-gray-400);
+  --dh-color-chart-axis-line: var(--dh-color-gray-500);
+  --dh-color-chart-axis-line-zero: var(--dh-color-gray-700);
+  --dh-color-chart-active: var(--dh-color-accent-600);
+
+  /* Update hsl components to --dh-color-gray-500-hsl as part of PR #1603 */
+  --dh-color-chart-range-bg: hsla(var(--dh-color-gray-hue), 1%, 36%, 0.7);
+  --dh-color-chart-area: var(--dh-color-visual-blue);
+  --dh-color-chart-trend: var(--dh-color-green-1200);
+
+  /* Error band */
+  --dh-color-chart-error-band-line: var(--dh-color-green-1400);
+
+  /* Update hsl components to --dh-color-green-1200-hsl base color defined by PR #1603 */
+  --dh-color-chart-error-band-fill: hsla(
+    var(--dh-color-green-hue),
+    71%,
+    70%,
+    0.1
+  );
+
+  /* OHLC */
+  --dh-color-chart-ohlc-increase: var(--dh-color-visual-green);
+  --dh-color-chart-ohlc-decrease: var(--dh-color-visual-red);
+
+  /* 
+   * This color shows up in the styleguide, but it doesn't seem to be consumed
+   * in production code. There has been discussion about it not being needed 
+   * anymore. 
+   */
+  --dh-color-chart-line-deprecated: var(--dh-color-visual-green);
+}
diff --git a/packages/console/src/HeapUsage.tsx b/packages/console/src/HeapUsage.tsx
index 5961561256..61dbaf593b 100644
--- a/packages/console/src/HeapUsage.tsx
+++ b/packages/console/src/HeapUsage.tsx
@@ -2,7 +2,7 @@ import { useState, ReactElement, useRef, useCallback } from 'react';
 import classNames from 'classnames';
 import { Tooltip } from '@deephaven/components';
 import type { QueryConnectable } from '@deephaven/jsapi-types';
-import { Plot, ChartTheme } from '@deephaven/chart';
+import { Plot, useChartTheme } from '@deephaven/chart';
 import Log from '@deephaven/log';
 import { useAsyncInterval } from '@deephaven/react-hooks';
 import './HeapUsage.scss';
@@ -26,6 +26,8 @@ function HeapUsage({
   bgMonitoring = true,
   monitorDuration,
 }: HeapUsageProps): ReactElement {
+  const chartTheme = useChartTheme();
+
   const [memoryUsage, setMemoryUsage] = useState({
     freeMemory: 0,
     maximumHeapSize: 999,
@@ -168,17 +170,17 @@ function HeapUsage({
                 colorway: ['#4878ea'],
                 xaxis: {
                   dtick: Math.round(monitorDuration / 6),
-                  gridcolor: ChartTheme.linecolor,
+                  gridcolor: chartTheme.linecolor,
                   range: [lastTimestamp - monitorDuration, lastTimestamp],
-                  linecolor: ChartTheme.linecolor,
+                  linecolor: chartTheme.linecolor,
                   linewidth: 2,
                   mirror: true,
                 },
                 yaxis: {
                   dtick: 0.2,
-                  gridcolor: ChartTheme.linecolor,
+                  gridcolor: chartTheme.linecolor,
                   range: [0, 1],
-                  linecolor: ChartTheme.linecolor,
+                  linecolor: chartTheme.linecolor,
                   linewidth: 2,
                   mirror: true,
                 },
diff --git a/packages/dashboard-core-plugins/src/ChartBuilderPlugin.tsx b/packages/dashboard-core-plugins/src/ChartBuilderPlugin.tsx
index 9c5ab2a0f0..5c549c7751 100644
--- a/packages/dashboard-core-plugins/src/ChartBuilderPlugin.tsx
+++ b/packages/dashboard-core-plugins/src/ChartBuilderPlugin.tsx
@@ -4,6 +4,7 @@ import {
   ChartModelFactory,
   ChartModelSettings,
   ChartUtils,
+  useChartTheme,
 } from '@deephaven/chart';
 import {
   assertIsDashboardPluginProps,
@@ -29,6 +30,8 @@ export function ChartBuilderPlugin(
   assertIsDashboardPluginProps(props);
   const { id, layout } = props;
   const dh = useApi();
+  const chartTheme = useChartTheme();
+
   const handleCreateChart = useCallback(
     ({
       metadata,
@@ -45,7 +48,12 @@ export function ChartBuilderPlugin(
     }) => {
       const { settings } = metadata;
       const makeModel = (): Promise<ChartModel> =>
-        ChartModelFactory.makeModelFromSettings(dh, settings, table);
+        ChartModelFactory.makeModelFromSettings(
+          dh,
+          settings,
+          table,
+          chartTheme
+        );
       const title = ChartUtils.titleFromSettings(settings);
 
       const config = {
@@ -64,7 +72,7 @@ export function ChartBuilderPlugin(
       const { root } = layout;
       LayoutUtils.openComponent({ root, config });
     },
-    [dh, id, layout]
+    [chartTheme, dh, id, layout]
   );
 
   useListener(layout.eventHub, IrisGridEvent.CREATE_CHART, handleCreateChart);
diff --git a/packages/dashboard-core-plugins/src/ChartPlugin.tsx b/packages/dashboard-core-plugins/src/ChartPlugin.tsx
index ec37c77f2d..5910b5c991 100644
--- a/packages/dashboard-core-plugins/src/ChartPlugin.tsx
+++ b/packages/dashboard-core-plugins/src/ChartPlugin.tsx
@@ -1,7 +1,12 @@
 import { forwardRef, useMemo } from 'react';
 import { useApi } from '@deephaven/jsapi-bootstrap';
 import { useConnection } from '@deephaven/jsapi-components';
-import { ChartModel, ChartModelFactory } from '@deephaven/chart';
+import {
+  ChartModel,
+  ChartModelFactory,
+  ChartTheme,
+  useChartTheme,
+} from '@deephaven/chart';
 import type { dh as DhType, IdeConnection } from '@deephaven/jsapi-types';
 import { IrisGridUtils } from '@deephaven/iris-grid';
 import { getTimeZone, store } from '@deephaven/redux';
@@ -19,6 +24,7 @@ import ConnectedChartPanel, {
 
 async function createChartModel(
   dh: DhType,
+  chartTheme: ChartTheme,
   connection: IdeConnection,
   metadata: ChartPanelMetadata,
   panelState?: GLChartPanelState
@@ -65,7 +71,7 @@ async function createChartModel(
     };
     const figure = await connection.getObject(definition);
 
-    return ChartModelFactory.makeModel(dh, settings, figure);
+    return ChartModelFactory.makeModel(dh, settings, figure, chartTheme);
   }
 
   const definition = {
@@ -80,13 +86,19 @@ async function createChartModel(
     getTimeZone(store.getState())
   );
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return ChartModelFactory.makeModelFromSettings(dh, settings as any, table);
+  return ChartModelFactory.makeModelFromSettings(
+    dh,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    settings as any,
+    table,
+    chartTheme
+  );
 }
 
 export const ChartPlugin = forwardRef(
   (props: WidgetComponentProps, ref: React.Ref<ChartPanel>) => {
     const dh = useApi();
+    const chartTheme = useChartTheme();
     const connection = useConnection();
 
     const hydratedProps = useMemo(
@@ -96,22 +108,25 @@ export const ChartPlugin = forwardRef(
         localDashboardId: props.localDashboardId,
         makeModel: () => {
           const { metadata } = props;
+
           const panelState = isChartPanelDehydratedProps(props)
             ? (props as unknown as ChartPanelProps).panelState
             : undefined;
+
           if (metadata == null) {
             throw new Error('Metadata is required for chart panel');
           }
 
           return createChartModel(
             dh,
+            chartTheme,
             connection,
             metadata as ChartPanelMetadata,
             panelState
           );
         },
       }),
-      [dh, connection, props]
+      [props, dh, chartTheme, connection]
     );
 
     // eslint-disable-next-line react/jsx-props-no-spreading
diff --git a/packages/embed-chart/src/App.tsx b/packages/embed-chart/src/App.tsx
index b9a7efb7d5..f7ee926cad 100644
--- a/packages/embed-chart/src/App.tsx
+++ b/packages/embed-chart/src/App.tsx
@@ -1,5 +1,10 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Chart, ChartModel, ChartModelFactory } from '@deephaven/chart'; // chart is used to display Deephaven charts
+import {
+  Chart,
+  ChartModel,
+  ChartModelFactory,
+  useChartTheme,
+} from '@deephaven/chart'; // chart is used to display Deephaven charts
 import { ContextMenuRoot, LoadingOverlay } from '@deephaven/components'; // Use the loading spinner from the Deephaven components package
 import type {
   dh as DhType,
@@ -49,6 +54,7 @@ function App(): JSX.Element {
   );
   const connection = useConnection();
   const dh = useApi();
+  const chartTheme = useChartTheme();
 
   useEffect(
     function initializeApp() {
@@ -72,7 +78,8 @@ function App(): JSX.Element {
           const newModel = await ChartModelFactory.makeModel(
             dh,
             undefined,
-            figure
+            figure,
+            chartTheme
           );
 
           setModel(newModel);
@@ -86,7 +93,7 @@ function App(): JSX.Element {
       }
       initApp();
     },
-    [dh, connection, searchParams]
+    [dh, connection, searchParams, chartTheme]
   );
 
   const isLoaded = model != null;
diff --git a/tests/figure.spec.ts-snapshots/can-set-point-shape-and-size-1-chromium-linux.png b/tests/figure.spec.ts-snapshots/can-set-point-shape-and-size-1-chromium-linux.png
index 657af1733d..35f74da052 100644
Binary files a/tests/figure.spec.ts-snapshots/can-set-point-shape-and-size-1-chromium-linux.png and b/tests/figure.spec.ts-snapshots/can-set-point-shape-and-size-1-chromium-linux.png differ
diff --git a/tests/figure.spec.ts-snapshots/can-set-point-shape-and-size-1-firefox-linux.png b/tests/figure.spec.ts-snapshots/can-set-point-shape-and-size-1-firefox-linux.png
index 1cdb88ffc0..642df4ec17 100644
Binary files a/tests/figure.spec.ts-snapshots/can-set-point-shape-and-size-1-firefox-linux.png and b/tests/figure.spec.ts-snapshots/can-set-point-shape-and-size-1-firefox-linux.png differ
diff --git a/tests/figure.spec.ts-snapshots/can-set-point-shape-and-size-1-webkit-linux.png b/tests/figure.spec.ts-snapshots/can-set-point-shape-and-size-1-webkit-linux.png
index 4c531d07c0..777985609b 100644
Binary files a/tests/figure.spec.ts-snapshots/can-set-point-shape-and-size-1-webkit-linux.png and b/tests/figure.spec.ts-snapshots/can-set-point-shape-and-size-1-webkit-linux.png differ