diff --git a/src/components/CustomCharts/FunnelChart.res b/src/components/CustomCharts/FunnelChart.res
index 2ab2e3e6ea..f563f27386 100644
--- a/src/components/CustomCharts/FunnelChart.res
+++ b/src/components/CustomCharts/FunnelChart.res
@@ -87,7 +87,7 @@ let make = (
               let i = i->Float.fromInt
               let opacity = (i +. 1.) /. length
               let borderTop = `${(size *. 14.)
-                  ->Float.toString}rem solid rgb(0,109,249,${opacity->Float.toString})`
+                  ->Float.toString}rem solid rgb(var(--color-primary),${opacity->Float.toString})`
 
               let currentWidthRatio = switch widths->Array.get(i->Float.toInt) {
               | Some(width) => width
diff --git a/src/components/CustomCharts/HighchartHorizontalBarChart.res b/src/components/CustomCharts/HighchartHorizontalBarChart.res
index b379909800..c9626f08b8 100644
--- a/src/components/CustomCharts/HighchartHorizontalBarChart.res
+++ b/src/components/CustomCharts/HighchartHorizontalBarChart.res
@@ -82,7 +82,7 @@ let make = (
       barChartData->Array.mapWithIndex((_data, i) => {
         let i = i->Int.toFloat
         let opacity = (length -. i +. 1.) /. (length +. 1.)
-        `rgb(0,109,249,${opacity->Float.toString})`
+        `rgb(var(--color-primary),${opacity->Float.toString})`
       })
     }
     let defaultOptions: HighchartsHorizontalBarChart.options = {
diff --git a/src/components/CustomCharts/HighchartPieChart.res b/src/components/CustomCharts/HighchartPieChart.res
index 18a92e65f5..d0441659d2 100644
--- a/src/components/CustomCharts/HighchartPieChart.res
+++ b/src/components/CustomCharts/HighchartPieChart.res
@@ -51,7 +51,7 @@ let make = (
       pieSeriesData->Array.mapWithIndex((_data, i) => {
         let i = i->Int.toFloat
         let opacity = (length -. i +. 1.) /. (length +. 1.)
-        `rgb(0,109,249,${opacity->Float.toString})`
+        `rgb(var(--color-primary),${opacity->Float.toString})`
       })
     }
     let defaultOptions: HighchartsPieChart.options = {