Support colorTheme in plotlypy mode

optuna_dashboard/ts/hooks/usePlot.ts

@@ -1,8 +1,10 @@
+import { useTheme } from "@mui/material"
 import { useQuery } from "@tanstack/react-query"
 import { AxiosError } from "axios"
 import * as plotly from "plotly.js-dist-min"
 import { PlotType } from "../apiClient"
 import { useAPIClient } from "../apiClientProvider"
+import { usePlotlyColorTheme } from "../state"
 
 export const usePlot = ({
   numCompletedTrials,
@@ -13,6 +15,9 @@ export const usePlot = ({
   studyId: number | undefined
   plotType: PlotType
 }) => {
+  const theme = useTheme()
+  const colorTheme = usePlotlyColorTheme(theme.palette.mode)
+
   const { apiClient } = useAPIClient()
   const { data, isLoading, error } = useQuery<
     { data: plotly.Data[]; layout: plotly.Layout },
@@ -32,7 +37,7 @@ export const usePlot = ({
 
   return {
     data: data?.data,
-    layout: data?.layout,
+    layout: { ...data?.layout, template: colorTheme },
     isLoading,
     error,
   }