[ML] Replace useIsDarkTheme() with EUI's colorMode. (elastic#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/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/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 ""