From fb71ea6eff2d4cef8724f96adcb928f90dd12c65 Mon Sep 17 00:00:00 2001
From: c-bata <contact@c-bata.link>
Date: Thu, 19 Sep 2024 16:40:55 +0900
Subject: [PATCH] Follow-up 964: Apply color theme in PlotEdf

---
 optuna_dashboard/ts/components/GraphEdf.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/optuna_dashboard/ts/components/GraphEdf.tsx b/optuna_dashboard/ts/components/GraphEdf.tsx
index 7211176d..16cb9567 100644
--- a/optuna_dashboard/ts/components/GraphEdf.tsx
+++ b/optuna_dashboard/ts/components/GraphEdf.tsx
@@ -32,6 +32,8 @@ const domId = "graph-edf"
 const GraphEdfBackend: FC<{
   studies: StudyDetail[]
 }> = ({ studies }) => {
+  const theme = useTheme()
+  const colorTheme = usePlotlyColorTheme(theme.palette.mode)
   const { apiClient } = useAPIClient()
   const { graphComponentState, notifyGraphDidRender } = useGraphComponentState()
 
@@ -49,7 +51,9 @@ const GraphEdfBackend: FC<{
       apiClient
         .getCompareStudiesPlot(studyIds, CompareStudiesPlotType.EDF)
         .then(({ data, layout }) => {
-          plotly.react(domId, data, layout).then(notifyGraphDidRender)
+          plotly
+            .react(domId, data, { ...layout, template: colorTheme })
+            .then(notifyGraphDidRender)
         })
         .catch((err) => {
           console.error(err)