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

## Summary

With the release of Per User Dark Mode, code should no longer rely on
calling `uiSettings` to determine which theme Kibana is displayed with.

With theme settings now configurable from User Profiles and Adv.
Settings, the code that was calling uiSettings to determine the Kibana
theme will not take into account which theme is currently being
displayed.


Applies an appropriate EUI theme based on the profile settings. In
particular for the following components:
- Anomaly swim lane (Fixes #158155 )
- Job tree map view (Fixes
#158304)
- Charts-related theme settings, e.g. the Single Metric Viewer

Author: darnautov

.github/CODEOWNERS

@@ -465,6 +465,7 @@ x-pack/packages/ml/date_picker @elastic/ml-ui
 x-pack/packages/ml/error_utils @elastic/ml-ui
 x-pack/packages/ml/is_defined @elastic/ml-ui
 x-pack/packages/ml/is_populated_object @elastic/ml-ui
+x-pack/packages/ml/kibana_theme @elastic/ml-ui
 x-pack/packages/ml/local_storage @elastic/ml-ui
 x-pack/packages/ml/nested_property @elastic/ml-ui
 x-pack/packages/ml/number_utils @elastic/ml-ui

package.json

@@ -480,6 +480,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

@@ -924,6 +924,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",
+  ]
+}