From acc4540f82d198476e1fcc3b9c15742b3115b7c1 Mon Sep 17 00:00:00 2001
From: shahzad31 <shahzad31comp@gmail.com>
Date: Wed, 30 Oct 2024 12:04:37 +0100
Subject: [PATCH] us proper theme

---
 .../public/embeddable/slo/overview/slo_overview_grid.tsx    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/observability_solution/slo/public/embeddable/slo/overview/slo_overview_grid.tsx b/x-pack/plugins/observability_solution/slo/public/embeddable/slo/overview/slo_overview_grid.tsx
index 1ca47e02f4df3..08cdd5539e9ac 100644
--- a/x-pack/plugins/observability_solution/slo/public/embeddable/slo/overview/slo_overview_grid.tsx
+++ b/x-pack/plugins/observability_solution/slo/public/embeddable/slo/overview/slo_overview_grid.tsx
@@ -9,7 +9,6 @@ import React from 'react';
 import { ALL_VALUE, HistoricalSummaryResponse, SLOWithSummaryResponse } from '@kbn/slo-schema';
 import {
   Chart,
-  DARK_THEME,
   isMetricElementEvent,
   Metric,
   MetricTrendShape,
@@ -77,8 +76,11 @@ export function SloCardChartList({ sloId }: { sloId: string }) {
   const {
     http: { basePath },
     uiSettings,
+    charts,
   } = useKibana().services;
 
+  const baseTheme = charts.theme.useChartsBaseTheme();
+
   const [selectedSlo, setSelectedSlo] = React.useState<SLOWithSummaryResponse | null>(null);
 
   const kqlQuery = `slo.id:"${sloId}"`;
@@ -156,7 +158,7 @@ export function SloCardChartList({ sloId }: { sloId: string }) {
       <div data-shared-item="" style={{ width: '100%' }}>
         <Chart>
           <Settings
-            baseTheme={DARK_THEME}
+            baseTheme={baseTheme}
             onElementClick={([d]) => {
               if (isMetricElementEvent(d)) {
                 const { columnIndex, rowIndex } = d;