diff --git a/optuna_dashboard/ts/hooks/usePlot.ts b/optuna_dashboard/ts/hooks/usePlot.ts
index e6ca5166..8531c1d0 100644
--- a/optuna_dashboard/ts/hooks/usePlot.ts
+++ b/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,
   }