[ML] Replace useIsDarkTheme() with EUI's colorMode. (#205079)

## Summary

This PR replaces the `useIsDarkTheme()` hook with EUI's `colorMode`.
Since this was the last hook in `@kbn/ml-kibana-theme` left this removes
the whole package too.

Note that the hook subscribed to an observable and was able to update
the theme in place. EUI's `colorMode` will only be updated after a page
refresh. Since updating the Kibana advanced setting to enable dark mode
requires a full page refresh too, I guess it's fair to remove this
behavior in favor of this simplification.

In the long run we should aim for getting rid of these checks altogether
and rely on dark-mode-aware EUI tokens.

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.

.github/CODEOWNERS

@@ -779,7 +779,6 @@ x-pack/platform/packages/private/ml/inference_integration_flyout @elastic/ml-ui
 x-pack/platform/packages/private/ml/is_defined @elastic/ml-ui
 x-pack/platform/packages/private/ml/is_populated_object @elastic/ml-ui
 x-pack/platform/packages/private/ml/json_schemas @elastic/ml-ui
-x-pack/platform/packages/private/ml/kibana_theme @elastic/ml-ui
 x-pack/platform/packages/private/ml/local_storage @elastic/ml-ui
 x-pack/platform/packages/private/ml/nested_property @elastic/ml-ui
 x-pack/platform/packages/private/ml/number_utils @elastic/ml-ui
@@ -3171,7 +3170,6 @@ x-pack/platform/packages/private/ml/inference_integration_flyout @elastic/ml-ui
 x-pack/platform/packages/private/ml/is_defined @elastic/ml-ui
 x-pack/platform/packages/private/ml/is_populated_object @elastic/ml-ui
 x-pack/platform/packages/private/ml/json_schemas @elastic/ml-ui
-x-pack/platform/packages/private/ml/kibana_theme @elastic/ml-ui
 x-pack/platform/packages/private/ml/local_storage @elastic/ml-ui
 x-pack/platform/packages/private/ml/nested_property @elastic/ml-ui
 x-pack/platform/packages/private/ml/number_utils @elastic/ml-ui

package.json

@@ -665,7 +665,6 @@
     "@kbn/ml-in-memory-table": "link:x-pack/platform/packages/private/ml/in_memory_table",
     "@kbn/ml-is-defined": "link:x-pack/platform/packages/private/ml/is_defined",
     "@kbn/ml-is-populated-object": "link:x-pack/platform/packages/private/ml/is_populated_object",
-    "@kbn/ml-kibana-theme": "link:x-pack/platform/packages/private/ml/kibana_theme",
     "@kbn/ml-local-storage": "link:x-pack/platform/packages/private/ml/local_storage",
     "@kbn/ml-nested-property": "link:x-pack/platform/packages/private/ml/nested_property",
     "@kbn/ml-number-utils": "link:x-pack/platform/packages/private/ml/number_utils",

tsconfig.base.json

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

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

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

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

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

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

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

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

@@ -1,9 +0,0 @@
-{
-  "type": "shared-common",
-  "id": "@kbn/ml-kibana-theme",
-  "owner": [
-    "@elastic/ml-ui"
-  ],
-  "group": "platform",
-  "visibility": "private"
-}

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

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

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

@@ -1,27 +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 { of } from 'rxjs';
-import useObservable from 'react-use/lib/useObservable';
-import type { ThemeServiceStart } from '@kbn/core-theme-browser';
-
-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;
-}

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

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

x-pack/platform/plugins/shared/aiops/public/components/log_categorization/format_category.test.tsx

@@ -9,10 +9,6 @@ import type { Category } from '@kbn/aiops-log-pattern-analysis/types';
 import { useCreateFormattedExample } from './format_category';
 import { renderHook } from '@testing-library/react';
 
-jest.mock('../../hooks/use_is_dark_theme', () => ({
-  useIsDarkTheme: () => false,
-}));
-
 const categoryData: Array<{
   category: Category;
   elementCount: number;

x-pack/platform/plugins/shared/aiops/public/components/log_categorization/format_category.tsx

@@ -7,11 +7,10 @@
 
 import type { FC, PropsWithChildren } from 'react';
 import React, { useCallback, useMemo } from 'react';
-import { EuiText, EuiHorizontalRule } from '@elastic/eui';
+import { useEuiTheme, EuiText, EuiHorizontalRule } from '@elastic/eui';
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 import type { Category } from '@kbn/aiops-log-pattern-analysis/types';
-import { useIsDarkTheme } from '../../hooks/use_is_dark_theme';
 
 interface Props {
   category: Category;
@@ -38,7 +37,8 @@ interface Styles {
 }
 
 const useStyles = (): Styles => {
-  const isDarkTheme = useIsDarkTheme();
+  const { colorMode } = useEuiTheme();
+  const isDarkTheme = colorMode === 'DARK';
 
   return useMemo(
     () =>

x-pack/platform/plugins/shared/aiops/public/hooks/use_is_dark_theme.ts

@@ -1,14 +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 { useIsDarkTheme as useIsDarkThemeMl } from '@kbn/ml-kibana-theme';
-import { useAiopsAppContext } from './use_aiops_app_context';
-
-export function useIsDarkTheme() {
-  const { theme } = useAiopsAppContext();
-  return useIsDarkThemeMl(theme);
-}

x-pack/platform/plugins/shared/aiops/tsconfig.json

@@ -49,7 +49,6 @@
     "@kbn/ml-in-memory-table",
     "@kbn/ml-is-defined",
     "@kbn/ml-is-populated-object",
-    "@kbn/ml-kibana-theme",
     "@kbn/ml-local-storage",
     "@kbn/ml-number-utils",
     "@kbn/ml-query-utils",

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

@@ -51,7 +51,6 @@ import {
   ML_SEVERITY_COLORS,
 } from '@kbn/ml-anomaly-utils';
 import { formatHumanReadableDateTime } from '@kbn/ml-date-utils';
-import { useIsDarkTheme } from '@kbn/ml-kibana-theme';
 import type { TimeBuckets as TimeBucketsClass } from '@kbn/ml-time-buckets';
 import { SwimLanePagination } from './swimlane_pagination';
 import type {
@@ -66,7 +65,6 @@ import { FormattedTooltip } from '../components/chart_tooltip/chart_tooltip';
 import './_explorer.scss';
 import { EMPTY_FIELD_VALUE_LABEL } from '../timeseriesexplorer/components/entity_control/entity_control';
 import { SWIM_LANE_LABEL_WIDTH, Y_AXIS_LABEL_PADDING } from './constants';
-import { useMlKibana } from '../contexts/kibana';
 
 declare global {
   interface Window {
@@ -204,12 +202,8 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
 }) => {
   const [chartWidth, setChartWidth] = useState<number>(0);
 
-  const {
-    services: { theme: themeService },
-  } = useMlKibana();
-
-  const isDarkTheme = useIsDarkTheme(themeService);
-  const { euiTheme } = useEuiTheme();
+  const { colorMode, euiTheme } = useEuiTheme();
+  const isDarkTheme = colorMode === 'DARK';
 
   // Holds the container height for previously fetched data
   const containerHeightRef = useRef<number>();

x-pack/platform/plugins/shared/ml/tsconfig.json

@@ -86,7 +86,6 @@
     "@kbn/ml-in-memory-table",
     "@kbn/ml-is-defined",
     "@kbn/ml-is-populated-object",
-    "@kbn/ml-kibana-theme",
     "@kbn/ml-local-storage",
     "@kbn/ml-nested-property",
     "@kbn/ml-number-utils",

yarn.lock

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