diff --git a/templates/web/prod/preview/popularity.html.twig b/templates/web/prod/preview/popularity.html.twig
index 30f64a4291..06127353c4 100644
--- a/templates/web/prod/preview/popularity.html.twig
+++ b/templates/web/prod/preview/popularity.html.twig
@@ -67,7 +67,16 @@
             }
         }
 
-
+        var $color = "#FFFFFF";
+        if ($('body').hasClass('000000')) {
+            $color = "#FFFFFF";
+        }
+        if ($('body').hasClass('FFFFFF')) {
+            $color = "#000000";
+        }
+        /*if ($('body').hasClass('959595')) {
+            $color = "#000000";
+        }*/
         function drawChartVisualisation() {
             var maxValue = statistics.max_views < 4 ? 4 : statistics.max_views;
             var data = new google.visualization.DataTable();
@@ -75,16 +84,7 @@
             data.addColumn('number', '{{ 'preview::visualisation' | trans }}');
 
             data.addRows(arrayViews);
-            var $color = "#FFFFFF";
-            if ($('body').hasClass('000000')) {
-                $color = "#FFFFFF";
-            }
-            if ($('body').hasClass('FFFFFF')) {
-                $color = "#000000";
-            }
-            /*if ($('body').hasClass('959595')) {
-                $color = "#000000";
-            }*/
+
 
             var options = {
                 titleTextStyle: {
@@ -138,7 +138,7 @@
 
             var options = {
                 titleTextStyle: {
-                    color: 'white',
+                    color: $color,
                     fontSize: 13
                 },
                 colors: ['#FF9900'],
@@ -147,29 +147,29 @@
                 hAxis: {
                     title: '{{ 'preview::date' | trans }}',
                     titleTextStyle: {
-                        color: 'white',
+                        color: $color,
                         fontSize: 11
                     },
-                    textStyle:{color: '#FFF'},
+                    textStyle:{color: $color},
                     format: 'd/M/yy',
                     gridlines: {color: 'none'},
                     min: new Date(statistics.from),
                     max: new Date(statistics.to),
-                    baselineColor: '#FFF'
+                    baselineColor: $color
                 },
                 vAxis: {
                     title: '{{ 'preview::downloads' | trans }}',
                     titleTextStyle: {
-                        color: 'white',
+                        color: $color,
                         fontSize: 11
                     },
-                    textStyle:{color: '#FFF'},
+                    textStyle:{color: $color},
                     minValue: 0,
                     maxValue: maxValue,
-                    baselineColor: '#FFF',
+                    baselineColor: $color,
                     format: '0'
                 },
-                legend: {position: 'top', textStyle: {color: 'white'}},
+                legend: {position: 'top', textStyle: {color: $color}},
             };
 
             var chart = new google.visualization.ColumnChart(
@@ -185,7 +185,7 @@
                 'backgroundColor': 'transparent',
                 is3D: true,
                 colors:['#FF9900','#3FDFFD', '#14CAB5', '#CAA514', '#97853C'],
-                legend: {position: 'right', textStyle: {color: 'white'}},
+                legend: {position: 'right', textStyle: {color: $color}},
                 chartArea: {width:'90%',height:'70%'}
             };