diff --git a/optuna_dashboard/ts/components/GraphParetoFront.tsx b/optuna_dashboard/ts/components/GraphParetoFront.tsx
index e5143b5c..457ab875 100644
--- a/optuna_dashboard/ts/components/GraphParetoFront.tsx
+++ b/optuna_dashboard/ts/components/GraphParetoFront.tsx
@@ -109,9 +109,10 @@ const makeScatterObject = (
   objectiveYId: number,
   hovertemplate: string,
   dominated: boolean,
-  feasible: boolean
+  feasible: boolean,
+  mode: string
 ): Partial<plotly.PlotData> => {
-  const marker = makeMarker(trials, dominated, feasible)
+  const marker = makeMarker(trials, dominated, feasible, mode)
   return {
     x: trials.map((t) => t.values![objectiveXId] as number),
     y: trials.map((t) => t.values![objectiveYId] as number),
@@ -126,7 +127,8 @@ const makeScatterObject = (
 const makeMarker = (
   trials: Trial[],
   dominated: boolean,
-  feasible: boolean
+  feasible: boolean,
+  mode: string
 ): Partial<plotly.PlotData> => {
   if (feasible && dominated) {
     return {
@@ -154,7 +156,7 @@ const makeMarker = (
   } else {
     return {
       // @ts-ignore
-      color: "#cccccc",
+      color: mode === "dark" ? "#666666" : "#cccccc",
     }
   }
 }
@@ -234,7 +236,8 @@ const plotParetoFront = (
         ? "%{text}<extra>Trial</extra>"
         : "%{text}<extra>Feasible Trial</extra>",
       true,
-      true
+      true,
+      mode
     ),
     makeScatterObject(
       feasibleTrials.filter((t, i) => !dominatedTrials[i]),
@@ -242,7 +245,8 @@ const plotParetoFront = (
       objectiveYId,
       "%{text}<extra>Best Trial</extra>",
       false,
-      true
+      true,
+      mode
     ),
     makeScatterObject(
       infeasibleTrials,
@@ -250,7 +254,8 @@ const plotParetoFront = (
       objectiveYId,
       "%{text}<extra>Infeasible Trial</extra>",
       false,
-      false
+      false,
+      mode
     ),
   ]