[APM] Add ThemeProvider to support dark mode

elastic · Jun 4, 2020 · 7891ffa · 7891ffa
1 parent fa8187b
commit 7891ffa
Showing 1 changed file with 20 additions and 12 deletions.
diff --git a/x-pack/plugins/apm/public/application/index.tsx b/x-pack/plugins/apm/public/application/index.tsx
@@ -9,6 +9,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Router, Switch } from 'react-router-dom';
 import styled from 'styled-components';
+import { EuiThemeProvider } from '../../../observability/public';
 import { CoreStart, AppMountParameters } from '../../../../../src/core/public';
 import { ApmPluginSetupDeps } from '../plugin';
 import { ApmPluginContext } from '../context/ApmPluginContext';
@@ -18,7 +19,10 @@ import { LocationProvider } from '../context/LocationContext';
 import { MatchedRouteProvider } from '../context/MatchedRouteContext';
 import { UrlParamsProvider } from '../context/UrlParamsContext';
 import { AlertsContextProvider } from '../../../triggers_actions_ui/public';
-import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public';
+import {
+  KibanaContextProvider,
+  useUiSetting$,
+} from '../../../../../src/plugins/kibana_react/public';
 import { px, unit, units } from '../style/variables';
 import { UpdateBreadcrumbs } from '../components/app/Main/UpdateBreadcrumbs';
 import { APMIndicesPermission } from '../components/app/APMIndicesPermission';
@@ -35,18 +39,22 @@ const MainContainer = styled.div`
 `;
 
 const App = () => {
+  const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
+
   return (
-    <MainContainer data-test-subj="apmMainContainer" role="main">
-      <UpdateBreadcrumbs routes={routes} />
-      <Route component={ScrollToTopOnPathChange} />
-      <APMIndicesPermission>
-        <Switch>
-          {routes.map((route, i) => (
-            <ApmRoute key={i} {...route} />
-          ))}
-        </Switch>
-      </APMIndicesPermission>
-    </MainContainer>
+    <EuiThemeProvider darkMode={darkMode}>
+      <MainContainer data-test-subj="apmMainContainer" role="main">
+        <UpdateBreadcrumbs routes={routes} />
+        <Route component={ScrollToTopOnPathChange} />
+        <APMIndicesPermission>
+          <Switch>
+            {routes.map((route, i) => (
+              <ApmRoute key={i} {...route} />
+            ))}
+          </Switch>
+        </APMIndicesPermission>
+      </MainContainer>
+    </EuiThemeProvider>
   );
 };