From 7891ffa8886354e3d05d7ffc06a700127fbde652 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?= <sorenlouv@gmail.com>
Date: Thu, 4 Jun 2020 12:40:41 +0200
Subject: [PATCH] [APM] Add ThemeProvider to support dark mode

---
 .../plugins/apm/public/application/index.tsx  | 32 ++++++++++++-------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/x-pack/plugins/apm/public/application/index.tsx b/x-pack/plugins/apm/public/application/index.tsx
index cb8600ed2c214a..56c427e67ad4cc 100644
--- 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>
   );
 };