From bf2b49085560ffc339aef66fbc29fb53f2321575 Mon Sep 17 00:00:00 2001
From: Nicolas Chaulet <nicolas.chaulet@elastic.co>
Date: Wed, 30 Aug 2023 14:37:16 -0400
Subject: [PATCH] [8.10] [Fleet] Fix user dark mode for integration app
 (#164882) (#165257)

# Backport

This will backport the following commits from `main` to `8.10`:
- [[Fleet] Fix user dark mode for integration app
(#164882)](https://github.com/elastic/kibana/pull/164882)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Nicolas
Chaulet","email":"nicolas.chaulet@elastic.co"},"sourceCommit":{"committedDate":"2023-08-28T07:16:26Z","message":"[Fleet]
Fix user dark mode for integration app (#164882)\n\n##
Summary\r\n\r\nResolve
https://github.com/elastic/kibana/issues/163328\r\n\r\nWhen user was
setting dark mode, the integration app was not corretcly\r\nhandling it
(it was already good for the Fleet APP)\r\nThat PR fix that.\r\n\r\n##
Test/UI Changes\r\n\r\nSet dark mode for your user and observe the
integration app is correctly\r\nrendered.\r\n\r\n<img width=\"1495\"
alt=\"Screenshot 2023-08-25 at 1 43 45
PM\"\r\nsrc=\"https://github.com/elastic/kibana/assets/1336873/7681b788-72b2-470e-924b-2f43d7653267\">","sha":"74f4ade42f3017e361483a72d832e11e647c1685","branchLabelMapping":{"^v8.11.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Fleet","v8.10.0","v8.11.0"],"number":164882,"url":"https://github.com/elastic/kibana/pull/164882","mergeCommit":{"message":"[Fleet]
Fix user dark mode for integration app (#164882)\n\n##
Summary\r\n\r\nResolve
https://github.com/elastic/kibana/issues/163328\r\n\r\nWhen user was
setting dark mode, the integration app was not corretcly\r\nhandling it
(it was already good for the Fleet APP)\r\nThat PR fix that.\r\n\r\n##
Test/UI Changes\r\n\r\nSet dark mode for your user and observe the
integration app is correctly\r\nrendered.\r\n\r\n<img width=\"1495\"
alt=\"Screenshot 2023-08-25 at 1 43 45
PM\"\r\nsrc=\"https://github.com/elastic/kibana/assets/1336873/7681b788-72b2-470e-924b-2f43d7653267\">","sha":"74f4ade42f3017e361483a72d832e11e647c1685"}},"sourceBranch":"main","suggestedTargetBranches":["8.10"],"targetPullRequestStates":[{"branch":"8.10","label":"v8.10.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.11.0","labelRegex":"^v8.11.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/164882","number":164882,"mergeCommit":{"message":"[Fleet]
Fix user dark mode for integration app (#164882)\n\n##
Summary\r\n\r\nResolve
https://github.com/elastic/kibana/issues/163328\r\n\r\nWhen user was
setting dark mode, the integration app was not corretcly\r\nhandling it
(it was already good for the Fleet APP)\r\nThat PR fix that.\r\n\r\n##
Test/UI Changes\r\n\r\nSet dark mode for your user and observe the
integration app is correctly\r\nrendered.\r\n\r\n<img width=\"1495\"
alt=\"Screenshot 2023-08-25 at 1 43 45
PM\"\r\nsrc=\"https://github.com/elastic/kibana/assets/1336873/7681b788-72b2-470e-924b-2f43d7653267\">","sha":"74f4ade42f3017e361483a72d832e11e647c1685"}}]}]
BACKPORT-->
---
 x-pack/plugins/fleet/public/applications/fleet/app.tsx        | 2 +-
 x-pack/plugins/fleet/public/applications/integrations/app.tsx | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/app.tsx b/x-pack/plugins/fleet/public/applications/fleet/app.tsx
index d7b8172e70c3e..e7a513e113c4f 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/app.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/app.tsx
@@ -255,7 +255,7 @@ export const FleetAppContext: React.FC<{
     theme$,
     fleetStatus,
   }) => {
-    const darkModeObservable = useObservable(startServices.theme.theme$);
+    const darkModeObservable = useObservable(theme$);
     const isDarkMode = darkModeObservable && darkModeObservable.darkMode;
 
     return (
diff --git a/x-pack/plugins/fleet/public/applications/integrations/app.tsx b/x-pack/plugins/fleet/public/applications/integrations/app.tsx
index 6212a1dffdb7b..83b57093a95c7 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/app.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/app.tsx
@@ -75,7 +75,9 @@ export const IntegrationsAppContext: React.FC<{
     theme$,
     fleetStatus,
   }) => {
-    const isDarkMode = useObservable<boolean>(startServices.uiSettings.get$('theme:darkMode'));
+    const theme = useObservable(theme$);
+    const isDarkMode = theme && theme.darkMode;
+
     const CloudContext = startServices.cloud?.CloudContextProvider || EmptyContext;
 
     return (