Fixes missing EUI theme in context

elastic · Dec 21, 2021 · 39e2830 · 39e2830
1 parent cc3772c
commit 39e2830
Showing 1 changed file with 13 additions and 8 deletions.
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/app.tsx b/x-pack/plugins/triggers_actions_ui/public/application/app.tsx
@@ -10,6 +10,7 @@ import { Switch, Route, Redirect, Router } from 'react-router-dom';
 import { ChromeBreadcrumb, CoreStart, CoreTheme, ScopedHistory } from 'kibana/public';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { I18nProvider } from '@kbn/i18n-react';
+import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
 import { KibanaFeature } from '../../../features/common';
 import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public';
@@ -22,6 +23,7 @@ import type { SpacesPluginStart } from '../../../spaces/public';
 
 import { suspendedComponentWithProps } from './lib/suspended_component_with_props';
 import { Storage } from '../../../../../src/plugins/kibana_utils/public';
+import { EuiThemeProvider } from '../../../../../src/plugins/kibana_react/common';
 
 import { setSavedObjectsClient } from '../common/lib/data_apis';
 import { KibanaContextProvider } from '../common/lib/kibana';
@@ -56,20 +58,23 @@ export const renderApp = (deps: TriggersAndActionsUiServices) => {
 };
 
 export const App = ({ deps }: { deps: TriggersAndActionsUiServices }) => {
-  const { savedObjects, theme$ } = deps;
+  const { savedObjects, uiSettings, theme$ } = deps;
   const sections: Section[] = ['rules', 'connectors'];
+  const isDarkMode = useObservable<boolean>(uiSettings.get$('theme:darkMode'));
 
   const sectionsRegex = sections.join('|');
   setSavedObjectsClient(savedObjects.client);
   return (
     <I18nProvider>
-      <KibanaThemeProvider theme$={theme$}>
-        <KibanaContextProvider services={{ ...deps }}>
-          <Router history={deps.history}>
-            <AppWithoutRouter sectionsRegex={sectionsRegex} />
-          </Router>
-        </KibanaContextProvider>
-      </KibanaThemeProvider>
+      <EuiThemeProvider darkMode={isDarkMode}>
+        <KibanaThemeProvider theme$={theme$}>
+          <KibanaContextProvider services={{ ...deps }}>
+            <Router history={deps.history}>
+              <AppWithoutRouter sectionsRegex={sectionsRegex} />
+            </Router>
+          </KibanaContextProvider>
+        </KibanaThemeProvider>
+      </EuiThemeProvider>
     </I18nProvider>
   );
 };