diff --git a/public/css/theme-arc-green.css b/public/css/theme-arc-green.css
index 28a127a3d..74a7c3ddc 100644
--- a/public/css/theme-arc-green.css
+++ b/public/css/theme-arc-green.css
@@ -249,6 +249,11 @@ a.ui.label:hover,a.ui.labels .label:hover{background-color:#505667!important;col
 .xdsoft_datetimepicker .xdsoft_datepicker .xdsoft_calendar td,.xdsoft_datetimepicker .xdsoft_datepicker .xdsoft_calendar th{border-color:#4c505c;background-color:#2a2e39}
 .xdsoft_datetimepicker .xdsoft_datepicker .xdsoft_calendar td.xdsoft_disabled,.xdsoft_datetimepicker .xdsoft_datepicker .xdsoft_calendar td.xdsoft_other_month{opacity:.8;background:#a0cc75;color:#000}
 .heatmap-color-0{background-color:#2d303b}
+.heatmap-color-1{background-color:#444f47}
+.heatmap-color-2{background-color:#5b6e52}
+.heatmap-color-3{background-color:#728e5e}
+.heatmap-color-4{background-color:#89ad69}
+.heatmap-color-5{background-color:#a0cc75}
 .CodeMirror{color:#9daccc;background-color:#2b2b2b;border-top:0}
 .CodeMirror div.CodeMirror-cursor{border-left:1px solid #9e9e9e}
 .CodeMirror .CodeMirror-gutters{background-color:#2b2b2b}
diff --git a/public/less/themes/arc-green.less b/public/less/themes/arc-green.less
index 27c32728a..06e7c78d4 100644
--- a/public/less/themes/arc-green.less
+++ b/public/less/themes/arc-green.less
@@ -1294,8 +1294,34 @@ a.ui.labels .label:hover {
     }
 }
 
+.heatmap(@heat) {
+    @heatmap-cold: #2d303b;
+    @heatmap-hot: #a0cc75;
+    background-color: mix(@heatmap-hot, @heatmap-cold, @heat);
+}
+
 .heatmap-color-0 {
-    background-color: #2d303b;
+    .heatmap(0%);
+}
+
+.heatmap-color-1 {
+    .heatmap(20%);
+}
+
+.heatmap-color-2 {
+    .heatmap(40%);
+}
+
+.heatmap-color-3 {
+    .heatmap(60%);
+}
+
+.heatmap-color-4 {
+    .heatmap(80%);
+}
+
+.heatmap-color-5 {
+    .heatmap(100%);
 }
 
 /* code mirror dark theme */