diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index a6d5f85891f62..655c8ef55079e 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -296,6 +296,7 @@ packages/kbn-capture-oas-snapshot-cli @elastic/kibana-core
packages/kbn-cases-components @elastic/response-ops
packages/kbn-cbor @elastic/kibana-operations
packages/kbn-chart-icons @elastic/kibana-visualizations
+packages/kbn-charts-theme @elastic/kibana-visualizations
packages/kbn-check-mappings-update-cli @elastic/kibana-core
packages/kbn-check-prod-native-modules-cli @elastic/kibana-operations
packages/kbn-ci-stats-core @elastic/kibana-operations
diff --git a/package.json b/package.json
index 0b62d48e35a04..fe6bf82ad0350 100644
--- a/package.json
+++ b/package.json
@@ -111,7 +111,7 @@
"@elastic/apm-rum": "^5.16.1",
"@elastic/apm-rum-core": "^5.21.1",
"@elastic/apm-rum-react": "^2.0.3",
- "@elastic/charts": "68.0.3",
+ "@elastic/charts": "68.0.4",
"@elastic/datemath": "5.0.3",
"@elastic/ebt": "^1.1.1",
"@elastic/ecs": "^8.11.1",
@@ -209,6 +209,7 @@
"@kbn/chart-expressions-common": "link:src/plugins/chart_expressions/common",
"@kbn/chart-icons": "link:packages/kbn-chart-icons",
"@kbn/charts-plugin": "link:src/plugins/charts",
+ "@kbn/charts-theme": "link:packages/kbn-charts-theme",
"@kbn/cloud": "link:packages/cloud",
"@kbn/cloud-chat-plugin": "link:x-pack/plugins/cloud_integrations/cloud_chat",
"@kbn/cloud-data-migration-plugin": "link:x-pack/platform/plugins/private/cloud_integrations/cloud_data_migration",
diff --git a/packages/content-management/content_insights/content_insights_public/src/components/views_stats/views_chart.tsx b/packages/content-management/content_insights/content_insights_public/src/components/views_stats/views_chart.tsx
index f05f8c2dbca69..c207f8fb18e19 100644
--- a/packages/content-management/content_insights/content_insights_public/src/components/views_stats/views_chart.tsx
+++ b/packages/content-management/content_insights/content_insights_public/src/components/views_stats/views_chart.tsx
@@ -8,11 +8,14 @@
*/
import React from 'react';
-import { Chart, Settings, DARK_THEME, LIGHT_THEME, BarSeries, Axis } from '@elastic/charts';
-import { formatDate, useEuiTheme } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
import moment from 'moment';
+import { Chart, Settings, BarSeries, Axis } from '@elastic/charts';
+import { formatDate } from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
+
const dateFormatter = (d: Date) => formatDate(d, `MM/DD`);
const seriesName = i18n.translate('contentManagement.contentEditor.viewsStats.viewsLabel', {
@@ -26,8 +29,7 @@ const weekOfFormatter = (date: Date) =>
});
export const ViewsChart = ({ data }: { data: Array<[week: number, views: number]> }) => {
- const { colorMode } = useEuiTheme();
-
+ const baseTheme = useElasticChartsTheme();
const momentDow = moment().localeData().firstDayOfWeek(); // configured from advanced settings
const isoDow = momentDow === 0 ? 7 : momentDow;
@@ -35,11 +37,7 @@ export const ViewsChart = ({ data }: { data: Array<[week: number, views: number]
return (
-
+
+
+ {/* ... */}
+
+ )
+}
+```
\ No newline at end of file
diff --git a/packages/kbn-charts-theme/index.ts b/packages/kbn-charts-theme/index.ts
new file mode 100644
index 0000000000000..933af3cc77257
--- /dev/null
+++ b/packages/kbn-charts-theme/index.ts
@@ -0,0 +1,23 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { type Theme, getChartsTheme } from '@elastic/charts';
+import { useEuiTheme } from '@elastic/eui';
+import { useMemo } from 'react';
+
+/**
+ * A hook used to get the `@elastic/charts` theme based on the current eui theme.
+ */
+export function useElasticChartsTheme(): Theme {
+ const { euiTheme, colorMode } = useEuiTheme();
+ return useMemo(
+ () => getChartsTheme(euiTheme.themeName, colorMode),
+ [colorMode, euiTheme.themeName]
+ );
+}
diff --git a/packages/kbn-charts-theme/jest.config.js b/packages/kbn-charts-theme/jest.config.js
new file mode 100644
index 0000000000000..9216db5e10b6b
--- /dev/null
+++ b/packages/kbn-charts-theme/jest.config.js
@@ -0,0 +1,14 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+module.exports = {
+ preset: '@kbn/test',
+ rootDir: '../..',
+ roots: ['/packages/kbn-charts-theme'],
+};
diff --git a/packages/kbn-charts-theme/kibana.jsonc b/packages/kbn-charts-theme/kibana.jsonc
new file mode 100644
index 0000000000000..b43497bc92ba9
--- /dev/null
+++ b/packages/kbn-charts-theme/kibana.jsonc
@@ -0,0 +1,5 @@
+{
+ "type": "shared-common",
+ "id": "@kbn/charts-theme",
+ "owner": "@elastic/kibana-visualizations"
+}
diff --git a/packages/kbn-charts-theme/package.json b/packages/kbn-charts-theme/package.json
new file mode 100644
index 0000000000000..1aa732346ed3b
--- /dev/null
+++ b/packages/kbn-charts-theme/package.json
@@ -0,0 +1,6 @@
+{
+ "name": "@kbn/charts-theme",
+ "private": true,
+ "version": "1.0.0",
+ "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0"
+}
\ No newline at end of file
diff --git a/packages/kbn-charts-theme/tsconfig.json b/packages/kbn-charts-theme/tsconfig.json
new file mode 100644
index 0000000000000..87f865132f4b4
--- /dev/null
+++ b/packages/kbn-charts-theme/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "extends": "../../tsconfig.base.json",
+ "compilerOptions": {
+ "outDir": "target/types",
+ "types": [
+ "jest",
+ "node",
+ "react"
+ ]
+ },
+ "include": [
+ "**/*.ts",
+ "**/*.tsx",
+ ],
+ "exclude": [
+ "target/**/*"
+ ],
+ "kbn_references": []
+}
diff --git a/src/plugins/charts/public/services/theme/theme.test.tsx b/src/plugins/charts/public/services/theme/theme.test.tsx
index df0acfbede1cf..b478dc284d0d6 100644
--- a/src/plugins/charts/public/services/theme/theme.test.tsx
+++ b/src/plugins/charts/public/services/theme/theme.test.tsx
@@ -74,7 +74,7 @@ describe('ThemeService', () => {
});
});
- describe('useBaseChartTheme', () => {
+ describe('useChartsBaseTheme', () => {
it('updates when the theme setting change', () => {
setUpMockTheme.theme$ = createTheme$Mock(false);
const themeService = new ThemeService();
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 10c2066c09866..744538cf60313 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -144,6 +144,8 @@
"@kbn/chart-icons/*": ["packages/kbn-chart-icons/*"],
"@kbn/charts-plugin": ["src/plugins/charts"],
"@kbn/charts-plugin/*": ["src/plugins/charts/*"],
+ "@kbn/charts-theme": ["packages/kbn-charts-theme"],
+ "@kbn/charts-theme/*": ["packages/kbn-charts-theme/*"],
"@kbn/check-mappings-update-cli": ["packages/kbn-check-mappings-update-cli"],
"@kbn/check-mappings-update-cli/*": ["packages/kbn-check-mappings-update-cli/*"],
"@kbn/check-prod-native-modules-cli": ["packages/kbn-check-prod-native-modules-cli"],
diff --git a/x-pack/platform/plugins/private/data_usage/public/app/components/chart_panel.tsx b/x-pack/platform/plugins/private/data_usage/public/app/components/chart_panel.tsx
index 9a7700a5de828..464c23d28fbee 100644
--- a/x-pack/platform/plugins/private/data_usage/public/app/components/chart_panel.tsx
+++ b/x-pack/platform/plugins/private/data_usage/public/app/components/chart_panel.tsx
@@ -6,7 +6,7 @@
*/
import React, { useCallback, useMemo } from 'react';
-import { EuiFlexItem, EuiPanel, EuiTitle, useEuiTheme } from '@elastic/eui';
+import { EuiFlexItem, EuiPanel, EuiTitle } from '@elastic/eui';
import {
Chart,
Axis,
@@ -14,10 +14,9 @@ import {
Settings,
ScaleType,
niceTimeFormatter,
- DARK_THEME,
- LIGHT_THEME,
LineSeries,
} from '@elastic/charts';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
import { i18n } from '@kbn/i18n';
import { LegendAction } from './legend_action';
import { type MetricTypes, type MetricSeries } from '../../../common/rest_types';
@@ -49,7 +48,7 @@ export const ChartPanel: React.FC = ({
popoverOpen,
togglePopover,
}) => {
- const theme = useEuiTheme();
+ const baseTheme = useElasticChartsTheme();
const chartTimestamps = series.flatMap((stream) => stream.data.map((d) => d.x));
@@ -97,7 +96,7 @@ export const ChartPanel: React.FC = ({
= ({ node, type, height }) => {
- const {
- services: { theme: themeService },
- } = useMlKibana();
- const isDarkTheme = useIsDarkTheme(themeService);
-
- const baseTheme = useMemo(() => (isDarkTheme ? DARK_THEME : LIGHT_THEME), [isDarkTheme]);
+ const baseTheme = useElasticChartsTheme();
const { isADEnabled, isDFAEnabled, isNLPEnabled } = useEnabledFeatures();
diff --git a/x-pack/platform/plugins/shared/ml/tsconfig.json b/x-pack/platform/plugins/shared/ml/tsconfig.json
index dce8710d648f3..4d5a3668403eb 100644
--- a/x-pack/platform/plugins/shared/ml/tsconfig.json
+++ b/x-pack/platform/plugins/shared/ml/tsconfig.json
@@ -136,5 +136,6 @@
"@kbn/core-saved-objects-api-server",
"@kbn/core-ui-settings-server",
"@kbn/core-security-server",
+ "@kbn/charts-theme",
]
}
diff --git a/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx
index 0136fcfb88f39..c895be7294a2c 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx
@@ -10,8 +10,6 @@ import {
Axis,
BarSeries,
Chart,
- LIGHT_THEME,
- DARK_THEME,
LineAnnotation,
Position,
RectAnnotation,
@@ -22,13 +20,14 @@ import {
Tooltip,
niceTimeFormatter,
} from '@elastic/charts';
-import { COLOR_MODES_STANDARD, EuiSpacer, useEuiTheme } from '@elastic/eui';
+import { EuiSpacer, useEuiTheme } from '@elastic/eui';
import React, { useMemo } from 'react';
import { IUiSettingsClient } from '@kbn/core/public';
import { TimeUnitChar } from '@kbn/observability-plugin/common';
import { UI_SETTINGS } from '@kbn/data-plugin/public';
import moment from 'moment';
import { i18n } from '@kbn/i18n';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
import { Coordinate } from '../../../../../typings/timeseries';
import { getTimeZone } from '../../../shared/charts/helper/timezone';
import { TimeLabelForData, TIME_LABELS, getDomain } from './chart_preview_helper';
@@ -54,6 +53,7 @@ export function ChartPreview({
totalGroups,
}: ChartPreviewProps) {
const theme = useEuiTheme();
+ const baseTheme = useElasticChartsTheme();
const thresholdOpacity = 0.3;
const DEFAULT_DATE_FORMAT = 'Y-MM-DD HH:mm:ss';
@@ -122,7 +122,7 @@ export function ChartPreview({
legendPosition={'bottom'}
legendSize={legendSize}
locale={i18n.getLocale()}
- theme={theme.colorMode === COLOR_MODES_STANDARD.dark ? DARK_THEME : LIGHT_THEME}
+ baseTheme={baseTheme}
/>
String(threshold);
const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) => {
const { logsShared } = useKibanaContextForPlugin().services;
const theme = useTheme();
+ const baseTheme = useElasticChartsTheme();
const timeRange = getPaddedAlertTimeRange(alert.fields[ALERT_START]!, alert.fields[ALERT_END]);
const alertEnd = alert.fields[ALERT_END] ? moment(alert.fields[ALERT_END]).valueOf() : undefined;
const interval = `${rule.params.timeSize}${rule.params.timeUnit}`;
@@ -93,7 +94,7 @@ const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) =>
{
const themeOverrides: PartialTheme = {
diff --git a/x-pack/plugins/observability_solution/observability_shared/tsconfig.json b/x-pack/plugins/observability_solution/observability_shared/tsconfig.json
index 15ae8d34c7f55..84c98161d5d46 100644
--- a/x-pack/plugins/observability_solution/observability_shared/tsconfig.json
+++ b/x-pack/plugins/observability_solution/observability_shared/tsconfig.json
@@ -46,6 +46,7 @@
"@kbn/es-query",
"@kbn/serverless",
"@kbn/data-views-plugin",
+ "@kbn/charts-theme",
"@kbn/deeplinks-observability",
],
"exclude": ["target/**/*", ".storybook/**/*.js"]
diff --git a/x-pack/plugins/triggers_actions_ui/.storybook/decorator.tsx b/x-pack/plugins/triggers_actions_ui/.storybook/decorator.tsx
index 8947cf9f6bbe8..fcaf0ce7597ce 100644
--- a/x-pack/plugins/triggers_actions_ui/.storybook/decorator.tsx
+++ b/x-pack/plugins/triggers_actions_ui/.storybook/decorator.tsx
@@ -15,7 +15,7 @@ import { KibanaThemeProvider, KibanaServices } from '@kbn/kibana-react-plugin/pu
import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
import type { NotificationsStart, ApplicationStart } from '@kbn/core/public';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { DARK_THEME, LIGHT_THEME } from '@elastic/charts';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
import { KibanaContextProvider } from '../public/common/lib/kibana';
import { ExperimentalFeaturesService } from '../public/common/experimental_features_service';
import { getHttp } from './context/http';
@@ -74,6 +74,9 @@ export const StorybookContextDecorator: FC
@@ -99,7 +102,7 @@ export const StorybookContextDecorator: FC (darkMode ? DARK_THEME : LIGHT_THEME),
+ useChartsBaseTheme: () => baseTheme,
useSparklineOverrides: () => ({
lineSeriesStyle: {
point: {
diff --git a/x-pack/plugins/triggers_actions_ui/tsconfig.json b/x-pack/plugins/triggers_actions_ui/tsconfig.json
index 7004ad1b1b08c..2fd21149f4e8f 100644
--- a/x-pack/plugins/triggers_actions_ui/tsconfig.json
+++ b/x-pack/plugins/triggers_actions_ui/tsconfig.json
@@ -74,7 +74,8 @@
"@kbn/core-application-browser",
"@kbn/cloud-plugin",
"@kbn/response-ops-rule-form",
- "@kbn/core-user-profile-browser-mocks"
+ "@kbn/core-user-profile-browser-mocks",
+ "@kbn/charts-theme"
],
"exclude": ["target/**/*"]
}
diff --git a/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/hooks/use_chart_theme.ts b/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/hooks/use_chart_theme.ts
index 65873a13de506..063d4c4eef5f4 100644
--- a/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/hooks/use_chart_theme.ts
+++ b/x-pack/solutions/observability/plugins/observability_ai_assistant_app/public/hooks/use_chart_theme.ts
@@ -5,14 +5,12 @@
* 2.0.
*/
-import { DARK_THEME, LIGHT_THEME, PartialTheme } from '@elastic/charts';
-import { useEuiTheme } from '@elastic/eui';
+import { PartialTheme } from '@elastic/charts';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
import { useMemo } from 'react';
export function useChartTheme() {
- const theme = useEuiTheme();
-
- const baseTheme = theme.colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME;
+ const baseTheme = useElasticChartsTheme();
return useMemo(() => {
const themeOverrides: PartialTheme = {
diff --git a/x-pack/solutions/observability/plugins/observability_ai_assistant_app/tsconfig.json b/x-pack/solutions/observability/plugins/observability_ai_assistant_app/tsconfig.json
index af075027d9cd4..212a36a502441 100644
--- a/x-pack/solutions/observability/plugins/observability_ai_assistant_app/tsconfig.json
+++ b/x-pack/solutions/observability/plugins/observability_ai_assistant_app/tsconfig.json
@@ -80,6 +80,7 @@
"@kbn/observability-ai-common",
"@kbn/llm-tasks-plugin",
"@kbn/product-doc-common",
+ "@kbn/charts-theme",
"@kbn/ai-assistant-icon",
],
"exclude": [
diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx
index 37836f6ef0711..c8c266db63736 100644
--- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx
+++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx
@@ -10,7 +10,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
import { css } from '@emotion/react';
import { Chart, Settings, Metric, MetricTrendShape } from '@elastic/charts';
import { EuiPanel, EuiSpacer } from '@elastic/eui';
-import { DARK_THEME } from '@elastic/charts';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
import { useTheme } from '@kbn/observability-shared-plugin/public';
import moment from 'moment';
import { useSelector, useDispatch } from 'react-redux';
@@ -132,8 +132,7 @@ export const MetricItem = ({
});
}
}}
- // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md
- baseTheme={DARK_THEME}
+ baseTheme={useElasticChartsTheme()}
locale={i18n.getLocale()}
/>
{
- const baseChartTheme = useBaseChartTheme();
+ const baseChartTheme = useElasticChartsTheme();
const { euiTheme } = useEuiTheme();
const { onElementClick, onProjectionClick } = useWaterfallContext();
const handleElementClick = useMemo(() => onElementClick, [onElementClick]);
diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_chart_fixed_axis.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_chart_fixed_axis.tsx
index 6ec71ee66f1a4..1d496c0f1e48b 100644
--- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_chart_fixed_axis.tsx
+++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_chart_fixed_axis.tsx
@@ -21,7 +21,7 @@ import {
} from '@elastic/charts';
import { useEuiTheme } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
-import { useBaseChartTheme } from '../../../../../../hooks/use_base_chart_theme';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
import { WaterfallChartFixedAxisContainer } from './styles';
import { WaterfallChartMarkers } from './waterfall_marker/waterfall_markers';
@@ -32,7 +32,7 @@ interface Props {
}
export const WaterfallChartFixedAxis = ({ tickFormat, domain, barStyleAccessor }: Props) => {
- const baseChartTheme = useBaseChartTheme();
+ const baseChartTheme = useElasticChartsTheme();
const { euiTheme } = useEuiTheme();
return (
diff --git a/x-pack/solutions/observability/plugins/synthetics/public/hooks/use_base_chart_theme.ts b/x-pack/solutions/observability/plugins/synthetics/public/hooks/use_base_chart_theme.ts
deleted file mode 100644
index 413081b998aec..0000000000000
--- a/x-pack/solutions/observability/plugins/synthetics/public/hooks/use_base_chart_theme.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
- * 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; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { DARK_THEME, LIGHT_THEME, Theme } from '@elastic/charts';
-import { useMemo } from 'react';
-import { useDarkMode } from '@kbn/kibana-react-plugin/public';
-
-export const useBaseChartTheme = (): Theme => {
- const darkMode = useDarkMode(false);
-
- return useMemo(() => {
- return darkMode ? DARK_THEME : LIGHT_THEME;
- }, [darkMode]);
-};
diff --git a/x-pack/solutions/observability/plugins/synthetics/tsconfig.json b/x-pack/solutions/observability/plugins/synthetics/tsconfig.json
index ece2a3934e60c..075ef1d3c6443 100644
--- a/x-pack/solutions/observability/plugins/synthetics/tsconfig.json
+++ b/x-pack/solutions/observability/plugins/synthetics/tsconfig.json
@@ -107,7 +107,8 @@
"@kbn/core-rendering-browser",
"@kbn/index-lifecycle-management-common-shared",
"@kbn/core-http-server-utils",
- "@kbn/apm-data-access-plugin"
+ "@kbn/apm-data-access-plugin",
+ "@kbn/charts-theme"
],
"exclude": ["target/**/*"]
}
diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_bar_chart.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_bar_chart.tsx
index 57b20eb3a179c..8f2c5dcf05da5 100644
--- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_bar_chart.tsx
+++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_bar_chart.tsx
@@ -21,9 +21,9 @@ import {
Tooltip,
} from '@elastic/charts';
import { i18n } from '@kbn/i18n';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
import { useAppFixedViewport } from '@kbn/core-rendering-browser';
import { BAR_HEIGHT } from './constants';
-import { useBaseChartTheme } from '../../../../../hooks/use_base_chart_theme';
import { WaterfallChartChartContainer, WaterfallChartTooltip } from './styles';
import { useWaterfallContext, WaterfallData } from '..';
import { WaterfallTooltipContent } from './waterfall_tooltip_content';
@@ -76,7 +76,7 @@ export const WaterfallBarChart = ({
barStyleAccessor,
index,
}: Props) => {
- const baseChartTheme = useBaseChartTheme();
+ const baseChartTheme = useElasticChartsTheme();
const { onElementClick, onProjectionClick } = useWaterfallContext();
const handleElementClick = useMemo(() => onElementClick, [onElementClick]);
const handleProjectionClick = useMemo(() => onProjectionClick, [onProjectionClick]);
diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_chart_fixed_axis.tsx b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_chart_fixed_axis.tsx
index 25d9f554f9fa4..4038b2f2d731e 100644
--- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_chart_fixed_axis.tsx
+++ b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_chart_fixed_axis.tsx
@@ -20,7 +20,7 @@ import {
Tooltip,
} from '@elastic/charts';
import { i18n } from '@kbn/i18n';
-import { useBaseChartTheme } from '../../../../../hooks/use_base_chart_theme';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
import { WaterfallChartFixedAxisContainer } from './styles';
import { WaterfallChartMarkers } from './waterfall_markers';
@@ -31,7 +31,7 @@ interface Props {
}
export const WaterfallChartFixedAxis = ({ tickFormat, domain, barStyleAccessor }: Props) => {
- const baseChartTheme = useBaseChartTheme();
+ const baseChartTheme = useElasticChartsTheme();
return (
diff --git a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/hooks/use_base_chart_theme.ts b/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/hooks/use_base_chart_theme.ts
deleted file mode 100644
index 007d463c63e1b..0000000000000
--- a/x-pack/solutions/observability/plugins/uptime/public/legacy_uptime/hooks/use_base_chart_theme.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * 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; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { useMemo } from 'react';
-import { useDarkMode } from '@kbn/kibana-react-plugin/public';
-import { DARK_THEME, LIGHT_THEME, Theme } from '@elastic/charts';
-
-export const useBaseChartTheme = (): Theme => {
- const darkMode = useDarkMode();
- return useMemo(() => {
- return darkMode ? DARK_THEME : LIGHT_THEME;
- }, [darkMode]);
-};
diff --git a/x-pack/solutions/observability/plugins/uptime/tsconfig.json b/x-pack/solutions/observability/plugins/uptime/tsconfig.json
index 6761601deb208..75d0e1521db38 100644
--- a/x-pack/solutions/observability/plugins/uptime/tsconfig.json
+++ b/x-pack/solutions/observability/plugins/uptime/tsconfig.json
@@ -78,6 +78,7 @@
"@kbn/deeplinks-observability",
"@kbn/ebt-tools",
"@kbn/core-rendering-browser",
+ "@kbn/charts-theme",
"@kbn/charts-plugin",
],
"exclude": ["target/**/*"]
diff --git a/x-pack/solutions/security/plugins/security_solution/public/siem_migrations/rules/components/migration_status_panels/migration_result_panel.tsx b/x-pack/solutions/security/plugins/security_solution/public/siem_migrations/rules/components/migration_status_panels/migration_result_panel.tsx
index cce11abcd8eb7..c8f12d4374834 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/siem_migrations/rules/components/migration_status_panels/migration_result_panel.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/siem_migrations/rules/components/migration_status_panels/migration_result_panel.tsx
@@ -16,11 +16,11 @@ import {
EuiBasicTable,
EuiHealth,
EuiText,
- useEuiTheme,
} from '@elastic/eui';
-import { Chart, BarSeries, Settings, ScaleType, DARK_THEME, LIGHT_THEME } from '@elastic/charts';
+import { Chart, BarSeries, Settings, ScaleType } from '@elastic/charts';
import { SecurityPageName } from '@kbn/security-solution-navigation';
import { AssistantIcon } from '@kbn/ai-assistant-icon';
+import { useElasticChartsTheme } from '@kbn/charts-theme';
import { PanelText } from '../../../../common/components/panel_text';
import {
convertTranslationResultIntoText,
@@ -120,7 +120,7 @@ MigrationResultPanel.displayName = 'MigrationResultPanel';
const TranslationResultsChart = React.memo<{
translationStats: RuleMigrationTranslationStats;
}>(({ translationStats }) => {
- const { colorMode } = useEuiTheme();
+ const baseTheme = useElasticChartsTheme();
const translationResultColors = useResultVisColors();
const data = [
{
@@ -154,11 +154,7 @@ const TranslationResultsChart = React.memo<{
return (
-
+