[8.8] [ML] Apply theme based on the User Profile settings (#158258) (#158442)

# Backport

This will backport the following commits from `main` to `8.8`:
- [[ML] Apply theme based on the User Profile settings
(#158258)](https://github.com/elastic/kibana/pull/158258)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Dima
Arnautov","email":"dmitrii.arnautov@elastic.co"},"sourceCommit":{"committedDate":"2023-05-25T09:57:48Z","message":"[ML]
Apply theme based on the User Profile settings (#158258)\n\n##
Summary\r\n\r\nWith the release of Per User Dark Mode, code should no
longer rely on\r\ncalling `uiSettings` to determine which theme Kibana
is displayed with.\r\n\r\nWith theme settings now configurable from User
Profiles and Adv.\r\nSettings, the code that was calling uiSettings to
determine the Kibana\r\ntheme will not take into account which theme is
currently being\r\ndisplayed.\r\n\r\n\r\nApplies an appropriate EUI
theme based on the profile settings. In\r\nparticular for the following
components:\r\n- Anomaly swim lane (Fixes #158155 )\r\n- Job tree map
view (Fixes\r\nhttps://github.com/elastic/kibana/issues/158304)\r\n-
Charts-related theme settings, e.g. the Single Metric
Viewer","sha":"c5eee26671ea5e215e5182b29562f6ffe5476965","branchLabelMapping":{"^v8.9.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix",":ml","Team:ML","v8.9.0","v8.8.1"],"number":158258,"url":"https://github.com/elastic/kibana/pull/158258","mergeCommit":{"message":"[ML]
Apply theme based on the User Profile settings (#158258)\n\n##
Summary\r\n\r\nWith the release of Per User Dark Mode, code should no
longer rely on\r\ncalling `uiSettings` to determine which theme Kibana
is displayed with.\r\n\r\nWith theme settings now configurable from User
Profiles and Adv.\r\nSettings, the code that was calling uiSettings to
determine the Kibana\r\ntheme will not take into account which theme is
currently being\r\ndisplayed.\r\n\r\n\r\nApplies an appropriate EUI
theme based on the profile settings. In\r\nparticular for the following
components:\r\n- Anomaly swim lane (Fixes #158155 )\r\n- Job tree map
view (Fixes\r\nhttps://github.com/elastic/kibana/issues/158304)\r\n-
Charts-related theme settings, e.g. the Single Metric
Viewer","sha":"c5eee26671ea5e215e5182b29562f6ffe5476965"}},"sourceBranch":"main","suggestedTargetBranches":["8.8"],"targetPullRequestStates":[{"branch":"main","label":"v8.9.0","labelRegex":"^v8.9.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/158258","number":158258,"mergeCommit":{"message":"[ML]
Apply theme based on the User Profile settings (#158258)\n\n##
Summary\r\n\r\nWith the release of Per User Dark Mode, code should no
longer rely on\r\ncalling `uiSettings` to determine which theme Kibana
is displayed with.\r\n\r\nWith theme settings now configurable from User
Profiles and Adv.\r\nSettings, the code that was calling uiSettings to
determine the Kibana\r\ntheme will not take into account which theme is
currently being\r\ndisplayed.\r\n\r\n\r\nApplies an appropriate EUI
theme based on the profile settings. In\r\nparticular for the following
components:\r\n- Anomaly swim lane (Fixes #158155 )\r\n- Job tree map
view (Fixes\r\nhttps://github.com/elastic/kibana/issues/158304)\r\n-
Charts-related theme settings, e.g. the Single Metric
Viewer","sha":"c5eee26671ea5e215e5182b29562f6ffe5476965"}},{"branch":"8.8","label":"v8.8.1","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

package.json

@@ -477,6 +477,7 @@
     "@kbn/ml-error-utils": "link:x-pack/packages/ml/error_utils",
     "@kbn/ml-is-defined": "link:x-pack/packages/ml/is_defined",
     "@kbn/ml-is-populated-object": "link:x-pack/packages/ml/is_populated_object",
+    "@kbn/ml-kibana-theme": "link:x-pack/packages/ml/kibana_theme",
     "@kbn/ml-local-storage": "link:x-pack/packages/ml/local_storage",
     "@kbn/ml-nested-property": "link:x-pack/packages/ml/nested_property",
     "@kbn/ml-number-utils": "link:x-pack/packages/ml/number_utils",

tsconfig.base.json

@@ -918,6 +918,8 @@
       "@kbn/ml-is-defined/*": ["x-pack/packages/ml/is_defined/*"],
       "@kbn/ml-is-populated-object": ["x-pack/packages/ml/is_populated_object"],
       "@kbn/ml-is-populated-object/*": ["x-pack/packages/ml/is_populated_object/*"],
+      "@kbn/ml-kibana-theme": ["x-pack/packages/ml/kibana_theme"],
+      "@kbn/ml-kibana-theme/*": ["x-pack/packages/ml/kibana_theme/*"],
       "@kbn/ml-local-storage": ["x-pack/packages/ml/local_storage"],
       "@kbn/ml-local-storage/*": ["x-pack/packages/ml/local_storage/*"],
       "@kbn/ml-nested-property": ["x-pack/packages/ml/nested_property"],

x-pack/packages/ml/kibana_theme/README.md

@@ -0,0 +1,3 @@
+# @kbn/ml-kibana-theme
+
+Provides hooks to retrieve currently applied theme and EUI theme variables.

x-pack/packages/ml/kibana_theme/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export { useIsDarkTheme, useCurrentEuiThemeVars, type EuiThemeType } from './src/hooks';

x-pack/packages/ml/kibana_theme/jest.config.js

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test/jest_node',
+  rootDir: '../../../..',
+  roots: ['<rootDir>/x-pack/packages/ml/kibana_theme'],
+};

x-pack/packages/ml/kibana_theme/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/ml-kibana-theme",
+  "owner": "@elastic/ml-ui"
+}

x-pack/packages/ml/kibana_theme/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/ml-kibana-theme",
+  "private": true,
+  "version": "1.0.0",
+  "license": "Elastic License 2.0"
+}

x-pack/packages/ml/kibana_theme/src/hooks.ts

@@ -0,0 +1,38 @@
+/*
+ * 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 { of } from 'rxjs';
+import useObservable from 'react-use/lib/useObservable';
+import { euiDarkVars as euiThemeDark, euiLightVars as euiThemeLight } from '@kbn/ui-theme';
+import { ThemeServiceStart } from '@kbn/core-theme-browser';
+
+export type EuiThemeType = typeof euiThemeLight | typeof euiThemeDark;
+
+const themeDefault = { darkMode: false };
+
+/**
+ * Indicates if the currently applied theme is either dark or light.
+ * @return {boolean} - Returns true if the currently applied theme is dark.
+ */
+export function useIsDarkTheme(theme: ThemeServiceStart): boolean {
+  const themeObservable$ = useMemo(() => {
+    return theme?.theme$ ?? of(themeDefault);
+  }, [theme]);
+
+  const { darkMode } = useObservable(themeObservable$, themeDefault);
+
+  return darkMode;
+}
+
+/**
+ * Returns an EUI theme definition based on the currently applied theme.
+ */
+export function useCurrentEuiThemeVars(theme: ThemeServiceStart): { euiTheme: EuiThemeType } {
+  const isDarkMode = useIsDarkTheme(theme);
+  return useMemo(() => ({ euiTheme: isDarkMode ? euiThemeDark : euiThemeLight }), [isDarkMode]);
+}

x-pack/packages/ml/kibana_theme/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": [
+      "jest",
+      "node"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+  ],
+  "exclude": [
+    "target/**/*"
+  ],
+  "kbn_references": [
+    "@kbn/ui-theme",
+    "@kbn/core-theme-browser",
+  ]
+}

x-pack/plugins/aiops/public/components/field_stats_popover/field_stats_popover.tsx

@@ -60,7 +60,7 @@ export function FieldStatsPopover({
           defaultMessage: 'Show top field values',
         })}
         data-test-subj={'aiopsContextPopoverButton'}
-        style={{ marginLeft: euiTheme.euiSizeXS }}
+        css={{ marginLeft: euiTheme.euiSizeXS }}
       />
     </EuiToolTip>
   );

x-pack/plugins/aiops/public/hooks/use_eui_theme.ts

@@ -5,19 +5,10 @@
  * 2.0.
  */
 
-import { useMemo } from 'react';
-
-import { euiLightVars as euiThemeLight, euiDarkVars as euiThemeDark } from '@kbn/ui-theme';
-
+import { useCurrentEuiThemeVars } from '@kbn/ml-kibana-theme';
 import { useAiopsAppContext } from './use_aiops_app_context';
 
-export type EuiThemeType = typeof euiThemeLight | typeof euiThemeDark;
-
 export function useEuiTheme() {
-  const { uiSettings } = useAiopsAppContext();
-
-  return useMemo(
-    () => (uiSettings.get('theme:darkMode') ? euiThemeDark : euiThemeLight),
-    [uiSettings]
-  );
+  const { theme } = useAiopsAppContext();
+  return useCurrentEuiThemeVars(theme).euiTheme;
 }

x-pack/plugins/aiops/tsconfig.json

@@ -50,10 +50,10 @@
     "@kbn/saved-search-plugin",
     "@kbn/share-plugin",
     "@kbn/ui-actions-plugin",
-    "@kbn/ui-theme",
     "@kbn/unified-field-list-plugin",
     "@kbn/unified-search-plugin",
     "@kbn/utility-types",
+    "@kbn/ml-kibana-theme",
   ],
   "exclude": [
     "target/**/*",

x-pack/plugins/data_visualizer/public/application/common/components/stats_table/hooks/use_color_range.ts

@@ -6,10 +6,7 @@
  */
 
 import d3 from 'd3';
-import { euiLightVars as euiThemeLight, euiDarkVars as euiThemeDark } from '@kbn/ui-theme';
-
 import { i18n } from '@kbn/i18n';
-
 import { useCurrentEuiTheme } from '../../../hooks/use_current_eui_theme';
 
 /**
@@ -194,5 +191,3 @@ export const useColorRange = (
 
   return scaleTypes[colorRangeScale];
 };
-
-export type EuiThemeType = typeof euiThemeLight | typeof euiThemeDark;

x-pack/plugins/data_visualizer/public/application/common/hooks/use_current_eui_theme.ts

@@ -5,15 +5,13 @@
  * 2.0.
  */
 
-import { useMemo } from 'react';
-import { euiDarkVars as euiThemeDark, euiLightVars as euiThemeLight } from '@kbn/ui-theme';
+import { useCurrentEuiThemeVars } from '@kbn/ml-kibana-theme';
 import { useDataVisualizerKibana } from '../../kibana_context';
 
 export function useCurrentEuiTheme() {
-  const { services } = useDataVisualizerKibana();
-  const uiSettings = services.uiSettings;
-  return useMemo(
-    () => (uiSettings.get('theme:darkMode') ? euiThemeDark : euiThemeLight),
-    [uiSettings]
-  );
+  const {
+    services: { theme },
+  } = useDataVisualizerKibana();
+
+  return useCurrentEuiThemeVars(theme).euiTheme;
 }

x-pack/plugins/data_visualizer/tsconfig.json

@@ -54,12 +54,12 @@
     "@kbn/share-plugin",
     "@kbn/test-jest-helpers",
     "@kbn/ui-actions-plugin",
-    "@kbn/ui-theme",
     "@kbn/unified-field-list-plugin",
     "@kbn/unified-search-plugin",
     "@kbn/usage-collection-plugin",
     "@kbn/utility-types",
     "@kbn/ml-error-utils",
+    "@kbn/ml-kibana-theme",
   ],
   "exclude": [
     "target/**/*",

x-pack/plugins/ml/public/application/components/color_range_legend/index.ts

@@ -13,5 +13,4 @@ export {
   useColorRange,
   COLOR_RANGE,
   COLOR_RANGE_SCALE,
-  useCurrentEuiTheme,
 } from './use_color_range';

x-pack/plugins/ml/public/application/components/color_range_legend/use_color_range.ts

@@ -6,12 +6,10 @@
  */
 
 import d3 from 'd3';
-import { useMemo } from 'react';
-import { euiLightVars as euiThemeLight, euiDarkVars as euiThemeDark } from '@kbn/ui-theme';
+import { euiDarkVars as euiThemeDark, euiLightVars as euiThemeLight } from '@kbn/ui-theme';
 
 import { i18n } from '@kbn/i18n';
-
-import { useUiSettings } from '../../contexts/kibana/use_ui_settings_context';
+import { useCurrentThemeVars } from '../../contexts/kibana';
 
 /**
  * Custom color scale factory that takes the amount of feature influencers
@@ -150,7 +148,7 @@ export const useColorRange = (
   colorRangeScale = COLOR_RANGE_SCALE.LINEAR,
   featureCount = 1
 ) => {
-  const { euiTheme } = useCurrentEuiTheme();
+  const { euiTheme } = useCurrentThemeVars();
 
   const colorRanges: Record<COLOR_RANGE, string[]> = {
     [COLOR_RANGE.BLUE]: [
@@ -188,11 +186,3 @@ export const useColorRange = (
 };
 
 export type EuiThemeType = typeof euiThemeLight | typeof euiThemeDark;
-
-export function useCurrentEuiTheme() {
-  const uiSettings = useUiSettings();
-  return useMemo(
-    () => ({ euiTheme: uiSettings.get('theme:darkMode') ? euiThemeDark : euiThemeLight }),
-    [uiSettings]
-  );
-}

x-pack/plugins/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/create_calendar.tsx

@@ -5,25 +5,24 @@
  * 2.0.
  */
 
-import React, { FC, Fragment, useCallback, memo } from 'react';
+import React, { FC, Fragment, memo, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import moment from 'moment';
-import { XYBrushEvent, BrushEndListener } from '@elastic/charts';
+import { BrushEndListener, XYBrushEvent } from '@elastic/charts';
 import {
+  EuiButtonIcon,
+  EuiDatePicker,
+  EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiSpacer,
   EuiFormRow,
-  EuiFieldText,
-  EuiDatePicker,
-  EuiButtonIcon,
   EuiPanel,
+  EuiSpacer,
 } from '@elastic/eui';
-
+import { useCurrentThemeVars } from '../../../contexts/kibana';
 import { EventRateChart } from '../../../jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart';
 import { Anomaly } from '../../../jobs/new_job/common/results_loader/results_loader';
-import { useCurrentEuiTheme } from '../../color_range_legend';
 import { LineChartPoint } from '../../../jobs/new_job/common/chart_loader/chart_loader';
 
 export interface CalendarEvent {
@@ -54,7 +53,7 @@ export const CreateCalendar: FC<Props> = ({
   const maxSelectableTimeMoment = moment(maxSelectableTimeStamp);
   const minSelectableTimeMoment = moment(minSelectableTimeStamp);
 
-  const { euiTheme } = useCurrentEuiTheme();
+  const { euiTheme } = useCurrentThemeVars();
 
   const onBrushEnd = useCallback(
     ({ x }: XYBrushEvent) => {

x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.test.tsx

@@ -21,6 +21,9 @@ const mockFilterManager = createFilterManagerMock();
 const mockEsSearch = jest.fn((body) => ({
   hits: { hits: [{ fields: { x: [1], y: [2] } }, { fields: { x: [2], y: [3] } }] },
 }));
+
+const mockEuiTheme = euiThemeLight;
+
 jest.mock('../../contexts/kibana', () => ({
   useMlApiContext: () => ({
     esSearch: mockEsSearch,
@@ -45,11 +48,7 @@ jest.mock('../../contexts/kibana', () => ({
       },
     },
   }),
-}));
-
-const mockEuiTheme = euiThemeLight;
-jest.mock('../color_range_legend', () => ({
-  useCurrentEuiTheme: () => ({
+  useCurrentThemeVars: () => ({
     euiTheme: mockEuiTheme,
   }),
 }));

x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useMemo, useEffect, useState, FC, useCallback } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 
 import type * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
 import {
@@ -28,15 +28,11 @@ import { Query } from '@kbn/data-plugin/common/query';
 import { DataView } from '@kbn/data-views-plugin/public';
 import { stringHash } from '@kbn/ml-string-hash';
 import { extractErrorMessage } from '@kbn/ml-error-utils';
-
 import { isRuntimeMappings } from '../../../../common/util/runtime_field_utils';
 import { RuntimeMappings } from '../../../../common/types/fields';
 
-import { getCombinedRuntimeMappings } from '../data_grid';
-import { useMlApiContext, useMlKibana } from '../../contexts/kibana';
-
-import { getProcessedFields } from '../data_grid';
-import { useCurrentEuiTheme } from '../color_range_legend';
+import { getCombinedRuntimeMappings, getProcessedFields } from '../data_grid';
+import { useCurrentThemeVars, useMlApiContext, useMlKibana } from '../../contexts/kibana';
 
 // Separate imports for lazy loadable VegaChart and related code
 import { VegaChart } from '../vega_chart';
@@ -149,7 +145,7 @@ export const ScatterplotMatrix: FC<ScatterplotMatrixProps> = ({
     { items: any[]; backgroundItems: any[]; columns: string[]; messages: string[] } | undefined
   >();
 
-  const { euiTheme } = useCurrentEuiTheme();
+  const { euiTheme } = useCurrentThemeVars();
 
   // formats the array of field names for EuiComboBox
   const fieldOptions = useMemo(

x-pack/plugins/ml/public/application/contexts/kibana/index.ts

@@ -14,3 +14,4 @@ export { useNotifications } from './use_notifications_context';
 export { useMlLocator, useMlLink } from './use_create_url';
 export { useMlApiContext } from './use_ml_api_context';
 export { useFieldFormatter } from './use_field_formatter';
+export { useCurrentThemeVars } from './use_current_theme';

x-pack/plugins/ml/public/application/contexts/kibana/use_current_theme.ts

@@ -0,0 +1,16 @@
+/*
+ * 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 { useCurrentEuiThemeVars } from '@kbn/ml-kibana-theme';
+import { useMlKibana } from './kibana_context';
+
+export function useCurrentThemeVars() {
+  const {
+    services: { theme },
+  } = useMlKibana();
+  return useCurrentEuiThemeVars(theme);
+}

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/evaluate_panel.tsx

@@ -7,7 +7,7 @@
 
 import './_classification_exploration.scss';
 
-import React, { FC, useState, useEffect } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import {
@@ -20,15 +20,14 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
-import { useMlKibana } from '../../../../../contexts/kibana';
+import { useCurrentThemeVars, useMlKibana } from '../../../../../contexts/kibana';
 
 // Separate imports for lazy loadable VegaChart and related code
 import { VegaChart } from '../../../../../components/vega_chart';
 import { VegaChartLoading } from '../../../../../components/vega_chart/vega_chart_loading';
-import { useCurrentEuiTheme } from '../../../../../components/color_range_legend';
 
 import { ErrorCallout } from '../error_callout';
-import { getDependentVar, DataFrameAnalyticsConfig } from '../../../../common';
+import { DataFrameAnalyticsConfig, getDependentVar } from '../../../../common';
 import { DataFrameTaskStateType } from '../../../analytics_management/components/analytics_list/common';
 import { ResultsSearchQuery } from '../../../../common/analytics';
 
@@ -40,11 +39,11 @@ import { EvaluationQualityMetricsTable } from './evaluation_quality_metrics_tabl
 import { getRocCurveChartVegaLiteSpec } from './get_roc_curve_chart_vega_lite_spec';
 
 import {
-  getColumnData,
-  getTrailingControlColumns,
+  ACTUAL_CLASS_ID,
   ConfusionMatrixColumn,
   ConfusionMatrixColumnData,
-  ACTUAL_CLASS_ID,
+  getColumnData,
+  getTrailingControlColumns,
   MAX_COLUMNS,
 } from './column_data';
 
@@ -108,7 +107,7 @@ export const EvaluatePanel: FC<EvaluatePanelProps> = ({ jobConfig, jobStatus, se
   const {
     services: { docLinks },
   } = useMlKibana();
-  const { euiTheme } = useCurrentEuiTheme();
+  const { euiTheme } = useCurrentThemeVars();
 
   const [columns, setColumns] = useState<ConfusionMatrixColumn[]>([]);
   const [columnsData, setColumnsData] = useState<ConfusionMatrixColumnData[]>([]);

x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/cytoscape.tsx

@@ -13,8 +13,10 @@ import React, {
   ReactNode,
   createContext,
   useCallback,
+  useMemo,
 } from 'react';
-import cytoscape from 'cytoscape';
+import { css } from '@emotion/react';
+import cytoscape, { type Stylesheet } from 'cytoscape';
 // @ts-ignore no declaration file
 import dagre from 'cytoscape-dagre';
 import { EuiThemeType } from '../../../../components/color_range_legend';
@@ -42,17 +44,23 @@ function useCytoscape(options: cytoscape.CytoscapeOptions) {
   useEffect(() => {
     if (!cy) {
       setCy(cytoscape({ ...options, container: ref.current }));
+    } else {
+      // update styles for existing instance
+      cy.style(options.style as unknown as Stylesheet);
     }
   }, [options, cy]);
 
   // Destroy the cytoscape instance on unmount
-  useEffect(() => {
-    return () => {
-      if (cy) {
-        cy.destroy();
-      }
-    };
-  }, [cy]);
+  useEffect(
+    function destroyOnUnmount() {
+      return () => {
+        if (cy) {
+          cy.destroy();
+        }
+      };
+    },
+    [cy]
+  );
 
   return [ref, cy] as [React.MutableRefObject<any>, cytoscape.Core | undefined];
 }
@@ -78,14 +86,20 @@ export function Cytoscape({
   style,
   width,
 }: CytoscapeProps) {
-  const [ref, cy] = useCytoscape({
-    ...getCytoscapeOptions(theme),
-    elements,
-  });
+  const cytoscapeOptions = useMemo(() => {
+    return {
+      ...getCytoscapeOptions(theme),
+      elements,
+    };
+  }, [theme, elements]);
+
+  const [ref, cy] = useCytoscape(cytoscapeOptions);
 
   // Add the height to the div style. The height is a separate prop because it
   // is required and can trigger rendering when changed.
-  const divStyle = { ...style, height };
+  const divStyle = useMemo(() => {
+    return { ...style, height };
+  }, [style, height]);
 
   const dataHandler = useCallback<cytoscape.EventHandler>(
     (event) => {
@@ -135,7 +149,13 @@ export function Cytoscape({
 
   return (
     <CytoscapeContext.Provider value={cy}>
-      <div ref={ref} style={divStyle} data-test-subj="mlPageDataFrameAnalyticsMapCytoscape">
+      <div
+        ref={ref}
+        css={css`
+          ${divStyle}
+        `}
+        data-test-subj="mlPageDataFrameAnalyticsMapCytoscape"
+      >
         {children}
       </div>
     </CytoscapeContext.Provider>

x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/job_map.tsx

@@ -9,11 +9,11 @@ import React, { FC, useEffect, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
-import { Cytoscape, Controls, JobMapLegend } from './components';
-import { useMlKibana, useMlLocator } from '../../../contexts/kibana';
+import { Controls, Cytoscape, JobMapLegend } from './components';
+import { useCurrentThemeVars, useMlKibana, useMlLocator } from '../../../contexts/kibana';
 import { JOB_MAP_NODE_TYPES } from '../../../../../common/constants/data_frame_analytics';
 import { ML_PAGES } from '../../../../../common/constants/locator';
-import { useCurrentEuiTheme, EuiThemeType } from '../../../components/color_range_legend';
+import { EuiThemeType } from '../../../components/color_range_legend';
 import { useRefresh } from '../../../routing/use_refresh';
 import { useRefDimensions } from './components/use_ref_dimensions';
 import { useFetchAnalyticsMapData } from './use_fetch_analytics_map_data';
@@ -65,7 +65,7 @@ export const JobMap: FC<Props> = ({ analyticsId, modelId, forceRefresh }) => {
     },
   } = useMlKibana();
   const locator = useMlLocator()!;
-  const { euiTheme } = useCurrentEuiTheme();
+  const { euiTheme } = useCurrentThemeVars();
   const refresh = useRefresh();
 
   const redirectToAnalyticsManagementPage = async () => {

x-pack/plugins/ml/public/application/explorer/swimlane_annotation_container.tsx

@@ -10,9 +10,9 @@ import d3 from 'd3';
 import { scaleTime } from 'd3-scale';
 import { i18n } from '@kbn/i18n';
 import moment from 'moment';
+import { useCurrentThemeVars } from '../contexts/kibana';
 import type { Annotation, AnnotationsTable } from '../../../common/types/annotations';
 import { ChartTooltipService } from '../components/chart_tooltip';
-import { useCurrentEuiTheme } from '../components/color_range_legend';
 
 export const Y_AXIS_LABEL_WIDTH = 170;
 export const Y_AXIS_LABEL_PADDING = 8;
@@ -36,8 +36,7 @@ export const SwimlaneAnnotationContainer: FC<SwimlaneAnnotationContainerProps> =
   tooltipService,
 }) => {
   const canvasRef = React.useRef<HTMLDivElement | null>(null);
-
-  const { euiTheme } = useCurrentEuiTheme();
+  const { euiTheme } = useCurrentThemeVars();
 
   useEffect(() => {
     if (canvasRef.current !== null && Array.isArray(annotationsData)) {

x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx

@@ -7,35 +7,34 @@
 
 import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
-  EuiText,
-  EuiLoadingChart,
-  EuiResizeObserver,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiLoadingChart,
+  EuiResizeObserver,
+  EuiText,
 } from '@elastic/eui';
-
 import { throttle } from 'lodash';
 import {
-  Chart,
   BrushEndListener,
-  Settings,
-  Heatmap,
-  HeatmapElementEvent,
+  Chart,
   ElementClickListener,
-  TooltipValue,
-  HeatmapSpec,
-  TooltipSettings,
+  Heatmap,
   HeatmapBrushEvent,
+  HeatmapElementEvent,
+  HeatmapSpec,
+  HeatmapStyle,
+  PartialTheme,
   Position,
   ScaleType,
-  PartialTheme,
-  HeatmapStyle,
+  Settings,
+  TooltipSettings,
+  TooltipValue,
 } from '@elastic/charts';
 import moment from 'moment';
-
 import { i18n } from '@kbn/i18n';
 import { ChartsPluginStart, useActiveCursor } from '@kbn/charts-plugin/public';
 import { css } from '@emotion/react';
+import { useIsDarkTheme } from '@kbn/ml-kibana-theme';
 import { SwimLanePagination } from './swimlane_pagination';
 import { AppStateSelectedCells, OverallSwimlaneData, ViewBySwimLaneData } from './explorer_utils';
 import { ANOMALY_THRESHOLD, SEVERITY_COLORS } from '../../../common';
@@ -44,12 +43,10 @@ import { SWIMLANE_TYPE, SwimlaneType } from './explorer_constants';
 import { mlEscape } from '../util/string_utils';
 import { FormattedTooltip } from '../components/chart_tooltip/chart_tooltip';
 import { formatHumanReadableDateTime } from '../../../common/util/date_utils';
-
 import './_explorer.scss';
 import { EMPTY_FIELD_VALUE_LABEL } from '../timeseriesexplorer/components/entity_control/entity_control';
-import { useUiSettings } from '../contexts/kibana';
-import { Y_AXIS_LABEL_WIDTH, Y_AXIS_LABEL_PADDING } from './swimlane_annotation_container';
-import { useCurrentEuiTheme } from '../components/color_range_legend';
+import { Y_AXIS_LABEL_PADDING, Y_AXIS_LABEL_WIDTH } from './swimlane_annotation_container';
+import { useCurrentThemeVars, useMlKibana } from '../contexts/kibana';
 
 declare global {
   interface Window {
@@ -190,8 +187,12 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
 }) => {
   const [chartWidth, setChartWidth] = useState<number>(0);
 
-  const isDarkTheme = !!useUiSettings().get('theme:darkMode');
-  const { euiTheme } = useCurrentEuiTheme();
+  const {
+    services: { theme: themeService },
+  } = useMlKibana();
+
+  const isDarkTheme = useIsDarkTheme(themeService);
+  const { euiTheme } = useCurrentThemeVars();
 
   // Holds the container height for previously fetched data
   const containerHeightRef = useRef<number>();
@@ -514,7 +515,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
                   {isLoading && (
                     <EuiText
                       textAlign={'center'}
-                      style={{
+                      css={{
                         position: 'absolute',
                         top: '50%',
                         left: '50%',

x-pack/plugins/ml/public/application/jobs/jobs_list/components/datafeed_chart_flyout/datafeed_chart_flyout.tsx

@@ -34,38 +34,36 @@ import {
   CurveType,
   CustomAnnotationTooltip,
   LineAnnotation,
-  LineSeries,
   LineAnnotationDatum,
+  LineAnnotationEvent,
+  LineSeries,
   Position,
   RectAnnotation,
   RectAnnotationDatum,
+  RectAnnotationEvent,
   ScaleType,
   Settings,
   timeFormatter,
-  RectAnnotationEvent,
-  LineAnnotationEvent,
   Tooltip,
   TooltipType,
 } from '@elastic/charts';
-
 import { DATAFEED_STATE } from '../../../../../../common/constants/states';
 import {
   CombinedJobWithStats,
-  ModelSnapshot,
   MlSummaryJob,
+  ModelSnapshot,
 } from '../../../../../../common/types/anomaly_detection_jobs';
 import { JobMessage } from '../../../../../../common/types/audit_message';
 import { LineAnnotationDatumWithModelSnapshot } from '../../../../../../common/types/results';
 import { useToastNotificationService } from '../../../../services/toast_notification_service';
-import { useMlApiContext } from '../../../../contexts/kibana';
-import { useCurrentEuiTheme } from '../../../../components/color_range_legend';
+import { useCurrentThemeVars, useMlApiContext } from '../../../../contexts/kibana';
 import { RevertModelSnapshotFlyout } from '../../../../components/model_snapshots/revert_model_snapshot_flyout';
 import { JobMessagesPane } from '../job_details/job_messages_pane';
 import { EditQueryDelay } from './edit_query_delay';
-import { CHART_DIRECTION, ChartDirectionType, CHART_SIZE } from './constants';
+import { CHART_DIRECTION, CHART_SIZE, ChartDirectionType } from './constants';
 import { loadFullJob } from '../utils';
 import { checkPermission } from '../../../../capabilities/check_capabilities';
-import { fillMissingChartData, type ChartDataWithNullValues } from './fill_missing_chart_data';
+import { type ChartDataWithNullValues, fillMissingChartData } from './fill_missing_chart_data';
 
 const dateFormatter = timeFormatter('MM-DD HH:mm:ss');
 const MAX_CHART_POINTS = 480;
@@ -142,10 +140,8 @@ export const DatafeedChartFlyout: FC<DatafeedChartFlyoutProps> = ({
     results: { getDatafeedResultChartData },
   } = useMlApiContext();
   const { displayErrorToast } = useToastNotificationService();
-  const { euiTheme } = useCurrentEuiTheme();
-
+  const { euiTheme } = useCurrentThemeVars();
   const handleChange = (date: moment.Moment) => setEndDate(date);
-
   const handleEndDateChange = (direction: ChartDirectionType) => {
     if (data.bucketSpan === undefined) return;
 

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/common/settings.ts

@@ -5,23 +5,21 @@
  * 2.0.
  */
 
-import { euiLightVars as lightTheme, euiDarkVars as darkTheme } from '@kbn/ui-theme';
+import { useCurrentThemeVars } from '../../../../../../contexts/kibana';
 import {
-  JobCreatorType,
   isMultiMetricJobCreator,
   isPopulationJobCreator,
+  JobCreatorType,
 } from '../../../../common/job_creator';
 import { getTimeBucketsFromCache, TimeBuckets } from '../../../../../../util/time_buckets';
-import { useUiSettings } from '../../../../../../contexts/kibana/use_ui_settings_context';
 
 export function useChartColors() {
-  const IS_DARK_THEME = useUiSettings().get('theme:darkMode');
-  const themeName = IS_DARK_THEME ? darkTheme : lightTheme;
+  const { euiTheme } = useCurrentThemeVars();
   return {
-    LINE_COLOR: themeName.euiColorPrimary,
-    MODEL_COLOR: themeName.euiColorPrimary,
-    EVENT_RATE_COLOR: themeName.euiColorPrimary,
-    EVENT_RATE_COLOR_WITH_ANOMALIES: themeName.euiColorLightShade,
+    LINE_COLOR: euiTheme.euiColorPrimary,
+    MODEL_COLOR: euiTheme.euiColorPrimary,
+    EVENT_RATE_COLOR: euiTheme.euiColorPrimary,
+    EVENT_RATE_COLOR_WITH_ANOMALIES: euiTheme.euiColorLightShade,
   };
 }
 

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/overlay_range.tsx

@@ -7,9 +7,9 @@
 
 import React, { FC } from 'react';
 import { EuiIcon } from '@elastic/eui';
-import { RectAnnotation, LineAnnotation, AnnotationDomainType, Position } from '@elastic/charts';
+import { AnnotationDomainType, LineAnnotation, Position, RectAnnotation } from '@elastic/charts';
+import { useCurrentThemeVars } from '../../../../../../contexts/kibana';
 import { timeFormatter } from '../../../../../../../../common/util/date_utils';
-import { useCurrentEuiTheme } from '../../../../../../components/color_range_legend';
 
 interface Props {
   overlayKey: number;
@@ -20,7 +20,7 @@ interface Props {
 }
 
 export const OverlayRange: FC<Props> = ({ overlayKey, start, end, color, showMarker = true }) => {
-  const { euiTheme } = useCurrentEuiTheme();
+  const { euiTheme } = useCurrentThemeVars();
 
   return (
     <>

x-pack/plugins/ml/public/application/memory_usage/memory_tree_map/tree_map.tsx

@@ -19,11 +19,12 @@ import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common';
 import { EuiComboBox, EuiComboBoxOptionOption, EuiEmptyPrompt, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { useIsDarkTheme } from '@kbn/ml-kibana-theme';
 import { MemoryUsageInfo } from '../../../../common/types/trained_models';
 import { JobType, MlSavedObjectType } from '../../../../common/types/saved_objects';
 import { useTrainedModelsApiService } from '../../services/ml_api_service/trained_models';
 import { LoadingWrapper } from '../../jobs/new_job/pages/components/charts/loading_wrapper';
-import { useFieldFormatter, useUiSettings } from '../../contexts/kibana';
+import { useFieldFormatter, useMlKibana } from '../../contexts/kibana';
 
 import { useRefresh } from '../../routing/use_refresh';
 import { getMemoryItemColor } from '../memory_item_colors';
@@ -65,7 +66,11 @@ const TYPE_OPTIONS: EuiComboBoxOptionOption[] = Object.entries(TYPE_LABELS).map(
 );
 
 export const JobMemoryTreeMap: FC<Props> = ({ node, type, height }) => {
-  const isDarkTheme = useUiSettings().get('theme:darkMode');
+  const {
+    services: { theme: themeService },
+  } = useMlKibana();
+  const isDarkTheme = useIsDarkTheme(themeService);
+
   const { theme, baseTheme } = useMemo(
     () =>
       isDarkTheme

x-pack/plugins/ml/public/application/model_management/test_models/models/ner/ner_output.tsx

@@ -10,18 +10,15 @@ import React, { FC, ReactNode } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import { FormattedMessage } from '@kbn/i18n-react';
 import {
-  EuiHorizontalRule,
   EuiBadge,
-  EuiToolTip,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiHorizontalRule,
   EuiIcon,
+  EuiToolTip,
 } from '@elastic/eui';
-
-import {
-  useCurrentEuiTheme,
-  EuiThemeType,
-} from '../../../../components/color_range_legend/use_color_range';
+import { useCurrentThemeVars } from '../../../../contexts/kibana';
+import { EuiThemeType } from '../../../../components/color_range_legend/use_color_range';
 import type { NerInference, NerResponse } from './ner_inference';
 import { INPUT_TYPE } from '../inference_base';
 
@@ -88,7 +85,7 @@ const NerOutput: FC<{ inferrer: NerInference }> = ({ inferrer }) => {
 };
 
 const Lines: FC<{ result: NerResponse }> = ({ result }) => {
-  const { euiTheme } = useCurrentEuiTheme();
+  const { euiTheme } = useCurrentThemeVars();
   const lineSplit: JSX.Element[] = [];
   result.response.forEach(({ value, entity }) => {
     if (entity === null) {
@@ -146,7 +143,7 @@ const EntityBadge = ({
   entity: estypes.MlTrainedModelEntities;
   children: ReactNode;
 }) => {
-  const { euiTheme } = useCurrentEuiTheme();
+  const { euiTheme } = useCurrentThemeVars();
   return (
     <EuiBadge
       // @ts-expect-error colors are correct in ENTITY_TYPES

x-pack/plugins/ml/public/application/model_management/test_models/models/question_answering/question_answering_output.tsx

@@ -7,14 +7,11 @@
 
 import React, { FC, ReactNode } from 'react';
 import useObservable from 'react-use/lib/useObservable';
-
 import { EuiBadge, EuiHorizontalRule } from '@elastic/eui';
-
-import { useCurrentEuiTheme } from '../../../../components/color_range_legend/use_color_range';
-
+import { useCurrentThemeVars } from '../../../../contexts/kibana';
 import type {
-  QuestionAnsweringInference,
   FormattedQuestionAnsweringResult,
+  QuestionAnsweringInference,
 } from './question_answering_inference';
 
 const ICON_PADDING = '2px';
@@ -61,7 +58,7 @@ function insertHighlighting(result: FormattedQuestionAnsweringResult, inputText:
 }
 
 const ResultBadge = ({ children }: { children: ReactNode }) => {
-  const { euiTheme } = useCurrentEuiTheme();
+  const { euiTheme } = useCurrentThemeVars();
   return (
     <EuiBadge
       color={euiTheme.euiColorVis5_behindText}

x-pack/plugins/ml/tsconfig.json

@@ -90,5 +90,6 @@
     "@kbn/usage-collection-plugin",
     "@kbn/utility-types",
     "@kbn/ml-error-utils",
+    "@kbn/ml-kibana-theme",
   ],
 }

yarn.lock

@@ -4574,6 +4574,10 @@
   version "0.0.0"
   uid ""
 
+"@kbn/ml-kibana-theme@link:x-pack/packages/ml/kibana_theme":
+  version "0.0.0"
+  uid ""
+
 "@kbn/ml-local-storage@link:x-pack/packages/ml/local_storage":
   version "0.0.0"
   uid ""