revert some changes

x-pack/plugins/apm/public/application/csmApp.tsx

@@ -5,14 +5,13 @@
  * 2.0.
  */
 
+import { euiDarkVars, euiLightVars } from '@kbn/ui-shared-deps/theme';
 import { AppMountParameters, CoreStart } from 'kibana/public';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Router } from 'react-router-dom';
-import {
-  euiStyled,
-  EuiThemeProvider,
-} from '../../../../../src/plugins/kibana_react/common';
+import { DefaultTheme, ThemeProvider } from 'styled-components';
+import { euiStyled } from '../../../../../src/plugins/kibana_react/common';
 import {
   KibanaContextProvider,
   RedirectAppLinks,
@@ -51,12 +50,18 @@ function CsmApp() {
   useBreadcrumbs(rumRoutes);
 
   return (
-    <EuiThemeProvider darkMode={darkMode}>
+    <ThemeProvider
+      theme={(outerTheme?: DefaultTheme) => ({
+        ...outerTheme,
+        eui: darkMode ? euiDarkVars : euiLightVars,
+        darkMode,
+      })}
+    >
       <CsmMainContainer data-test-subj="csmMainContainer" role="main">
         <Route component={ScrollToTopOnPathChange} />
         <RumHome />
       </CsmMainContainer>
-    </EuiThemeProvider>
+    </ThemeProvider>
   );
 }
 

x-pack/plugins/apm/public/components/alerting/chart_preview/index.tsx

@@ -21,8 +21,8 @@ import {
 } from '@elastic/charts';
 import { EuiSpacer } from '@elastic/eui';
 import React from 'react';
-import { useEuiTheme } from '../../../../../../../src/plugins/kibana_react/common';
 import { Coordinate } from '../../../../typings/timeseries';
+import { useTheme } from '../../../hooks/use_theme';
 
 interface ChartPreviewProps {
   yTickFormat?: TickFormatter;
@@ -35,7 +35,7 @@ export function ChartPreview({
   yTickFormat,
   threshold,
 }: ChartPreviewProps) {
-  const theme = useEuiTheme();
+  const theme = useTheme();
   const thresholdOpacity = 0.3;
   const timestamps = data.map((d) => d.x);
   const xMin = Math.min(...timestamps);

x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/SelectableUrlList.tsx

@@ -29,20 +29,31 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
+import { euiDarkVars, euiLightVars } from '@kbn/ui-shared-deps/theme';
+import styled from 'styled-components';
 import useEvent from 'react-use/lib/useEvent';
 import {
   formatOptions,
   selectableRenderOptions,
   UrlOption,
 } from './RenderOption';
 import { I18LABELS } from '../../translations';
-import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
+import { useUiSetting$ } from '../../../../../../../../../src/plugins/kibana_react/public';
 
-const StyledRow = euiStyled.div`
+const StyledRow = styled.div<{
+  darkMode: boolean;
+}>`
   text-align: center;
   padding: 8px 0px;
-  background-color: ${({ theme }) => theme.eui.euiPageBackgroundColor};
-  border-bottom: 1px solid ${({ theme }) => theme.eui.euiColorLightestShade};
+  background-color: ${(props) =>
+    props.darkMode
+      ? euiDarkVars.euiPageBackgroundColor
+      : euiLightVars.euiPageBackgroundColor};
+  border-bottom: 1px solid
+    ${(props) =>
+      props.darkMode
+        ? euiDarkVars.euiColorLightestShade
+        : euiLightVars.euiColorLightestShade};
 `;
 
 interface Props {
@@ -73,6 +84,8 @@ export function SelectableUrlList({
   setPopoverIsOpen,
   initialValue,
 }: Props) {
+  const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
+
   const [popoverRef, setPopoverRef] = useState<HTMLElement | null>(null);
   const [searchRef, setSearchRef] = useState<HTMLInputElement | null>(null);
 
@@ -197,7 +210,7 @@ export function SelectableUrlList({
           <div style={{ width: 600, maxWidth: '100%' }}>
             <PopOverTitle />
             {searchValue && (
-              <StyledRow>
+              <StyledRow darkMode={darkMode}>
                 <EuiText size="s">
                   <FormattedMessage
                     id="xpack.apm.ux.url.hitEnter.include"

x-pack/plugins/apm/public/components/app/correlations/error_correlations.tsx

@@ -19,7 +19,6 @@ import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { useEuiTheme } from '../../../../../../../src/plugins/kibana_react/common';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
 import { APIReturnType } from '../../../services/rest/createCallApmApi';
@@ -29,6 +28,7 @@ import {
   SelectedSignificantTerm,
 } from './correlations_table';
 import { ChartContainer } from '../../shared/charts/chart_container';
+import { useTheme } from '../../../hooks/use_theme';
 import { CustomFields } from './custom_fields';
 import { useFieldNames } from './use_field_names';
 import { useLocalStorage } from '../../../hooks/useLocalStorage';
@@ -176,7 +176,7 @@ function ErrorTimeseriesChart({
   selectedSignificantTerm: SelectedSignificantTerm | null;
   status: FETCH_STATUS;
 }) {
-  const theme = useEuiTheme();
+  const theme = useTheme();
   const dateFormatter = timeFormatter('HH:mm:ss');
 
   return (

x-pack/plugins/apm/public/components/app/correlations/latency_correlations.tsx

@@ -17,7 +17,6 @@ import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { useEuiTheme } from '../../../../../../../src/plugins/kibana_react/common';
 import { getDurationFormatter } from '../../../../common/utils/formatters';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
@@ -27,6 +26,7 @@ import {
   SelectedSignificantTerm,
 } from './correlations_table';
 import { ChartContainer } from '../../shared/charts/chart_container';
+import { useTheme } from '../../../hooks/use_theme';
 import { CustomFields, PercentileOption } from './custom_fields';
 import { useFieldNames } from './use_field_names';
 import { useLocalStorage } from '../../../hooks/useLocalStorage';
@@ -207,7 +207,7 @@ function LatencyDistributionChart({
   selectedSignificantTerm: SelectedSignificantTerm | null;
   status: FETCH_STATUS;
 }) {
-  const theme = useEuiTheme();
+  const theme = useTheme();
   const xMax = Math.max(
     ...(data?.overall?.distribution.map((p) => p.x ?? 0) ?? [])
   );

x-pack/plugins/lists/public/exceptions/components/and_or_badge/index.stories.tsx

@@ -6,17 +6,24 @@
  */
 
 import { Story, addDecorator } from '@storybook/react';
+import { euiThemeVars } from '@kbn/ui-shared-deps/theme';
 import React from 'react';
+import { ThemeProvider } from 'styled-components';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
-import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
+import { getMockTheme } from '../../../common/test_utils/kibana_react.mock';
 
 import { AndOrBadge, AndOrBadgeProps } from '.';
 
 const sampleText =
   'Doggo ipsum i am bekom fat snoot wow such tempt waggy wags floofs, ruff heckin good boys and girls mlem.  Ruff heckin good boys and girls mlem stop it fren borkf borking doggo very hand that feed shibe, you are doing me the shock big ol heck smol borking doggo with a long snoot for pats heckin good boys. You are doing me the shock smol borking doggo with a long snoot for pats wow very biscit, length boy. Doggo ipsum i am bekom fat snoot wow such tempt waggy wags floofs, ruff heckin good boys and girls mlem.  Ruff heckin good boys and girls mlem stop it fren borkf borking doggo very hand that feed shibe, you are doing me the shock big ol heck smol borking doggo with a long snoot for pats heckin good boys.';
 
-addDecorator((storyFn) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>);
+const mockTheme = getMockTheme({
+  darkMode: false,
+  eui: euiThemeVars,
+});
+
+addDecorator((storyFn) => <ThemeProvider theme={mockTheme}>{storyFn()}</ThemeProvider>);
 
 export default {
   argTypes: {

x-pack/plugins/lists/public/exceptions/components/builder/entry_renderer.stories.tsx

@@ -5,18 +5,24 @@
  * 2.0.
  */
 
+import { euiThemeVars } from '@kbn/ui-shared-deps/theme';
 import { Story, addDecorator } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import React from 'react';
+import { ThemeProvider } from 'styled-components';
 import { HttpStart } from 'kibana/public';
 
 import { OperatorEnum, OperatorTypeEnum } from '../../../../common';
 import { AutocompleteStart } from '../../../../../../../src/plugins/data/public';
 import { fields } from '../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks';
-import { EuiThemeProvider } from '../../../../../../../src/plugins/kibana_react/common';
+import { getMockTheme } from '../../../common/test_utils/kibana_react.mock';
 
 import { BuilderEntryItem, EntryItemProps } from './entry_renderer';
 
+const mockTheme = getMockTheme({
+  darkMode: false,
+  eui: euiThemeVars,
+});
 const mockAutocompleteService = ({
   getValueSuggestions: () =>
     new Promise((resolve) => {
@@ -53,7 +59,7 @@ const mockAutocompleteService = ({
     }),
 } as unknown) as AutocompleteStart;
 
-addDecorator((storyFn) => <EuiThemeProvider>{storyFn()}</EuiThemeProvider>);
+addDecorator((storyFn) => <ThemeProvider theme={mockTheme}>{storyFn()}</ThemeProvider>);
 
 export default {
   argTypes: {

x-pack/plugins/ml/public/application/app.tsx

@@ -12,7 +12,7 @@ import ReactDOM from 'react-dom';
 import { AppMountParameters, CoreStart, HttpStart } from 'kibana/public';
 
 import { Storage } from '../../../../../src/plugins/kibana_utils/public';
-import { EuiThemeProvider } from '../../../../../src/plugins/kibana_react/common';
+
 import {
   KibanaContextProvider,
   RedirectAppLinks,
@@ -87,8 +87,6 @@ const App: FC<AppProps> = ({ coreStart, deps, appMountParams }) => {
   };
 
   const I18nContext = coreStart.i18n.Context;
-  const darkMode = coreStart.uiSettings.get<boolean>('theme:darkMode');
-
   return (
     /** RedirectAppLinks intercepts all <a> tags to use navigateToUrl
      * avoiding full page reload **/
@@ -97,9 +95,7 @@ const App: FC<AppProps> = ({ coreStart, deps, appMountParams }) => {
         <KibanaContextProvider
           services={{ ...services, mlServices: getMlGlobalServices(coreStart.http) }}
         >
-          <EuiThemeProvider darkMode={darkMode}>
-            <MlRouter pageDeps={pageDeps} />
-          </EuiThemeProvider>
+          <MlRouter pageDeps={pageDeps} />
         </KibanaContextProvider>
       </I18nContext>
     </RedirectAppLinks>

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

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

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

@@ -5,9 +5,12 @@
  * 2.0.
  */
 
-import { i18n } from '@kbn/i18n';
 import d3 from 'd3';
-import { useEuiTheme } from '../../../../../../../src/plugins/kibana_react/common';
+import { useMemo } from 'react';
+import { euiDarkVars, euiLightVars } from '@kbn/ui-shared-deps/theme';
+import { i18n } from '@kbn/i18n';
+
+import { useUiSettings } from '../../contexts/kibana/use_ui_settings_context';
 
 /**
  * Custom color scale factory that takes the amount of feature influencers
@@ -146,16 +149,16 @@ export const useColorRange = (
   colorRangeScale = COLOR_RANGE_SCALE.LINEAR,
   featureCount = 1
 ) => {
-  const { eui } = useEuiTheme();
+  const { euiTheme } = useCurrentEuiTheme();
 
   const colorRanges: Record<COLOR_RANGE, string[]> = {
     [COLOR_RANGE.BLUE]: [
-      d3.rgb(eui.euiColorEmptyShade).toString(),
-      d3.rgb(eui.euiColorVis1).toString(),
+      d3.rgb(euiTheme.euiColorEmptyShade).toString(),
+      d3.rgb(euiTheme.euiColorVis1).toString(),
     ],
     [COLOR_RANGE.RED]: [
-      d3.rgb(eui.euiColorEmptyShade).toString(),
-      d3.rgb(eui.euiColorDanger).toString(),
+      d3.rgb(euiTheme.euiColorEmptyShade).toString(),
+      d3.rgb(euiTheme.euiColorDanger).toString(),
     ],
     [COLOR_RANGE.RED_GREEN]: ['red', 'green'],
     [COLOR_RANGE.GREEN_RED]: ['green', 'red'],
@@ -182,3 +185,13 @@ export const useColorRange = (
 
   return scaleTypes[colorRangeScale];
 };
+
+export type EuiThemeType = typeof euiLightVars | typeof euiDarkVars;
+
+export function useCurrentEuiTheme() {
+  const uiSettings = useUiSettings();
+  return useMemo(
+    () => ({ euiTheme: uiSettings.get('theme:darkMode') ? euiDarkVars : euiLightVars }),
+    [uiSettings]
+  );
+}

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

@@ -23,8 +23,8 @@ import {
 
 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 '../../../components/color_range_legend';
 import { LineChartPoint } from '../../../jobs/new_job/common/chart_loader/chart_loader';
-import { useEuiTheme } from '../../../../../../../../src/plugins/kibana_react/common';
 
 export interface CalendarEvent {
   start: moment.Moment | null;
@@ -54,7 +54,7 @@ export const CreateCalendar: FC<Props> = ({
   const maxSelectableTimeMoment = moment(maxSelectableTimeStamp);
   const minSelectableTimeMoment = moment(minSelectableTimeStamp);
 
-  const { eui } = useEuiTheme();
+  const { euiTheme } = useCurrentEuiTheme();
 
   const onBrushEnd = useCallback(
     ({ x }: XYBrushArea) => {
@@ -150,7 +150,7 @@ export const CreateCalendar: FC<Props> = ({
           end: c.end!.valueOf(),
         }))}
         onBrushEnd={onBrushEnd}
-        overlayColor={eui.euiColorPrimary}
+        overlayColor={euiTheme.euiColorPrimary}
       />
       <EuiSpacer size="s" />
 
@@ -221,7 +221,7 @@ export const CreateCalendar: FC<Props> = ({
               <EuiFlexItem
                 grow={false}
                 style={{
-                  borderLeft: `1px solid ${eui.euiColorLightShade}`,
+                  borderLeft: `1px solid ${euiTheme.euiColorLightShade}`,
                   marginRight: '0px',
                 }}
               />

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

@@ -22,7 +22,6 @@ import {
 
 import { i18n } from '@kbn/i18n';
 
-import { useEuiTheme } from '../../../../../../../src/plugins/kibana_react/common';
 import { extractErrorMessage } from '../../../../common';
 import { stringHash } from '../../../../common/util/string_utils';
 import type { SearchResponse7 } from '../../../../common/types/es_client';
@@ -31,6 +30,7 @@ import type { ResultsSearchQuery } from '../../data_frame_analytics/common/analy
 import { useMlApiContext } from '../../contexts/kibana';
 
 import { getProcessedFields } from '../data_grid';
+import { useCurrentEuiTheme } from '../color_range_legend';
 
 // Separate imports for lazy loadable VegaChart and related code
 import { VegaChart } from '../vega_chart';
@@ -152,7 +152,7 @@ export const ScatterplotMatrix: FC<ScatterplotMatrixProps> = ({
     setDynamicSize(!dynamicSize);
   };
 
-  const { eui } = useEuiTheme();
+  const { euiTheme } = useCurrentEuiTheme();
 
   useEffect(() => {
     if (fields.length === 0) {
@@ -254,7 +254,7 @@ export const ScatterplotMatrix: FC<ScatterplotMatrixProps> = ({
     return getScatterplotMatrixVegaLiteSpec(
       items,
       columns,
-      eui,
+      euiTheme,
       resultsField,
       color,
       legendType,