From 3d0296788e860f78ae20baef4d4132edcc9e461f Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@elastic.co>
Date: Thu, 17 Nov 2022 13:24:47 -0700
Subject: [PATCH] [controls] fix Time Slider text is not working properly with
 Dark Mode (#145612)

Fixes https://github.com/elastic/kibana/issues/145594

TimeSlider component is not wrapped by KibanaThemeProvider and therefore
does not properly use kibana themeing. This PR resolves the issues by
wrapping TimeSlider by KibanaThemeProvider.

To test
* set advanced setting `theme:darkMode` to true
* open dashboard
* add time slider
* verify timeslider is using dark theme

<img width="500" alt="Screen Shot 2022-11-17 at 12 04 40 PM"
src="https://user-images.githubusercontent.com/373691/202536272-9ef9e9fe-debe-4722-a50e-03929b94c18d.png">

(cherry picked from commit d5ed16a86e105e3cd1418fa1a42a3745a46e0a9c)
---
 .../embeddable/time_slider_embeddable.tsx     | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/plugins/controls/public/time_slider/embeddable/time_slider_embeddable.tsx b/src/plugins/controls/public/time_slider/embeddable/time_slider_embeddable.tsx
index 8122bbfda78134..ffb7bd2610fc55 100644
--- a/src/plugins/controls/public/time_slider/embeddable/time_slider_embeddable.tsx
+++ b/src/plugins/controls/public/time_slider/embeddable/time_slider_embeddable.tsx
@@ -12,6 +12,7 @@ import moment from 'moment-timezone';
 import { Embeddable, IContainer } from '@kbn/embeddable-plugin/public';
 import { ReduxEmbeddableTools, ReduxEmbeddablePackage } from '@kbn/presentation-util-plugin/public';
 import type { TimeRange } from '@kbn/es-query';
+import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Subscription } from 'rxjs';
@@ -270,16 +271,18 @@ export class TimeSliderControlEmbeddable extends Embeddable<
     const { Wrapper: TimeSliderControlReduxWrapper } = this.reduxEmbeddableTools;
 
     ReactDOM.render(
-      <TimeSliderControlReduxWrapper>
-        <TimeSlider
-          formatDate={this.epochToKbnDateFormat}
-          onChange={(value?: [number, number]) => {
-            this.onTimesliceChange(value);
-            const range = value ? value[TO_INDEX] - value[FROM_INDEX] : undefined;
-            this.onRangeChange(range);
-          }}
-        />
-      </TimeSliderControlReduxWrapper>,
+      <KibanaThemeProvider theme$={pluginServices.getServices().theme.theme$}>
+        <TimeSliderControlReduxWrapper>
+          <TimeSlider
+            formatDate={this.epochToKbnDateFormat}
+            onChange={(value?: [number, number]) => {
+              this.onTimesliceChange(value);
+              const range = value ? value[TO_INDEX] - value[FROM_INDEX] : undefined;
+              this.onRangeChange(range);
+            }}
+          />
+        </TimeSliderControlReduxWrapper>
+      </KibanaThemeProvider>,
       node
     );
   };