Initial (incomplete) support for themes. Currently, the default is the new Pi-hole dark theme.

Signed-off-by: DL6ER <dl6er@dl6er.de>

scripts/pi-hole/js/index.js

@@ -689,7 +689,7 @@ function updateTopLists() {
             percentage.toFixed(1) +
             "% of " +
             data.dns_queries_today +
-            '"> <div class="progress-bar progress-bar-green" style="width: ' +
+            '"> <div class="progress-bar queries-permitted" style="width: ' +
             percentage +
             '%"></div> </div> </td> </tr> '
         );
@@ -722,7 +722,7 @@ function updateTopLists() {
             percentage.toFixed(1) +
             "% of " +
             data.ads_blocked_today +
-            '"> <div class="progress-bar progress-bar-yellow" style="width: ' +
+            '"> <div class="progress-bar queries-blocked" style="width: ' +
             percentage +
             '%"></div> </div> </td> </tr> '
         );
@@ -824,8 +824,10 @@ $(document).ready(function () {
   // Pull in data via AJAX
   updateSummaryData();
 
-  var blockedColor = "#999";
-  var permittedColor = "#00a65a";
+  var blockedColor = $(".queries-blocked").css("background-color");
+  var permittedColor = $(".queries-permitted").css("background-color");
+  var gridColor = $(".graphs-grid").css("background-color");
+  var ticksColor = $(".graphs-ticks").css("color");
 
   var ctx = document.getElementById("queryOverTimeChart").getContext("2d");
   timeLineChart = new Chart(ctx, {
@@ -912,6 +914,12 @@ $(document).ready(function () {
                 hour: "HH:mm"
               },
               tooltipFormat: "HH:mm"
+            },
+            gridLines: {
+              color: gridColor
+            },
+            ticks: {
+              fontColor: ticksColor
             }
           }
         ],
@@ -920,6 +928,12 @@ $(document).ready(function () {
             stacked: true,
             ticks: {
               beginAtZero: true
+            },
+            gridLines: {
+              color: gridColor
+            },
+            ticks: {
+              fontColor: ticksColor
             }
           }
         ]
@@ -980,6 +994,12 @@ $(document).ready(function () {
                   hour: "HH:mm"
                 },
                 tooltipFormat: "HH:mm"
+              },
+              gridLines: {
+                color: gridColor
+              },
+              ticks: {
+                fontColor: ticksColor
               }
             }
           ],
@@ -988,7 +1008,13 @@ $(document).ready(function () {
               ticks: {
                 beginAtZero: true
               },
-              stacked: true
+              stacked: true,
+              gridLines: {
+                color: gridColor
+              },
+              ticks: {
+                fontColor: ticksColor
+              }
             }
           ]
         },
@@ -1040,6 +1066,11 @@ $(document).ready(function () {
         datasets: [{ data: [] }]
       },
       options: {
+        elements: {
+          arc: {
+            borderColor: $(".box").css("background-color")
+          }
+        },
         legend: {
           display: false
         },
@@ -1077,6 +1108,11 @@ $(document).ready(function () {
         datasets: [{ data: [] }]
       },
       options: {
+        elements: {
+          arc: {
+            borderColor: $(".box").css("background-color")
+          }
+        },
         legend: {
           display: false
         },