[8.6] [controls] fix Time Slider text is not working properly with Da…

…rk Mode (#145612) (#145623)

# Backport

This will backport the following commits from `main` to `8.6`:
- [[controls] fix Time Slider text is not working properly with Dark
Mode (#145612)](#145612)

<!--- Backport version: 8.9.7 -->

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

<!--BACKPORT [{"author":{"name":"Nathan
Reese","email":"[email protected]"},"sourceCommit":{"committedDate":"2022-11-17T20:24:47Z","message":"[controls]
fix Time Slider text is not working properly with Dark Mode
(#145612)\n\nFixes
https://github.com/elastic/kibana/issues/145594\r\n\r\nTimeSlider
component is not wrapped by KibanaThemeProvider and therefore\r\ndoes
not properly use kibana themeing. This PR resolves the issues
by\r\nwrapping TimeSlider by KibanaThemeProvider.\r\n\r\nTo test\r\n*
set advanced setting `theme:darkMode` to true\r\n* open dashboard\r\n*
add time slider\r\n* verify timeslider is using dark theme\r\n\r\n<img
width=\"500\" alt=\"Screen Shot 2022-11-17 at 12 04 40
PM\"\r\nsrc=\"https://user-images.githubusercontent.com/373691/202536272-9ef9e9fe-debe-4722-a50e-03929b94c18d.png\">","sha":"d5ed16a86e105e3cd1418fa1a42a3745a46e0a9c","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Presentation","auto-backport","v8.6.0","v8.7.0"],"number":145612,"url":"https://github.com/elastic/kibana/pull/145612","mergeCommit":{"message":"[controls]
fix Time Slider text is not working properly with Dark Mode
(#145612)\n\nFixes
https://github.com/elastic/kibana/issues/145594\r\n\r\nTimeSlider
component is not wrapped by KibanaThemeProvider and therefore\r\ndoes
not properly use kibana themeing. This PR resolves the issues
by\r\nwrapping TimeSlider by KibanaThemeProvider.\r\n\r\nTo test\r\n*
set advanced setting `theme:darkMode` to true\r\n* open dashboard\r\n*
add time slider\r\n* verify timeslider is using dark theme\r\n\r\n<img
width=\"500\" alt=\"Screen Shot 2022-11-17 at 12 04 40
PM\"\r\nsrc=\"https://user-images.githubusercontent.com/373691/202536272-9ef9e9fe-debe-4722-a50e-03929b94c18d.png\">","sha":"d5ed16a86e105e3cd1418fa1a42a3745a46e0a9c"}},"sourceBranch":"main","suggestedTargetBranches":["8.6"],"targetPullRequestStates":[{"branch":"8.6","label":"v8.6.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/145612","number":145612,"mergeCommit":{"message":"[controls]
fix Time Slider text is not working properly with Dark Mode
(#145612)\n\nFixes
https://github.com/elastic/kibana/issues/145594\r\n\r\nTimeSlider
component is not wrapped by KibanaThemeProvider and therefore\r\ndoes
not properly use kibana themeing. This PR resolves the issues
by\r\nwrapping TimeSlider by KibanaThemeProvider.\r\n\r\nTo test\r\n*
set advanced setting `theme:darkMode` to true\r\n* open dashboard\r\n*
add time slider\r\n* verify timeslider is using dark theme\r\n\r\n<img
width=\"500\" alt=\"Screen Shot 2022-11-17 at 12 04 40
PM\"\r\nsrc=\"https://user-images.githubusercontent.com/373691/202536272-9ef9e9fe-debe-4722-a50e-03929b94c18d.png\">","sha":"d5ed16a86e105e3cd1418fa1a42a3745a46e0a9c"}}]}]
BACKPORT-->

Co-authored-by: Nathan Reese <[email protected]>

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
     );
   };