Use theme gridColor and ticksColor in long time graph

Signed-off-by: Christian König <ckoenig@posteo.de>

db_graph.php

@@ -7,6 +7,9 @@
 *    Please see LICENSE file for your rights under this license. */
     require "scripts/pi-hole/php/header.php";
 ?>
+<!-- Sourceing CSS colors from stylesheet to be used in JS code -->
+<span class="graphs-grid"></span>
+<span class="graphs-ticks"></span>
 
 <div class="page-header">
     <h1>Compute graphical statistics from the Pi-hole query database</h1>

scripts/pi-hole/js/db_graph.js

@@ -160,6 +160,9 @@ $(function () {
   var ctx = document.getElementById("queryOverTimeChart").getContext("2d");
   var blockedColor = "#999";
   var permittedColor = "#00a65a";
+  var gridColor = $(".graphs-grid").css("background-color");
+  var ticksColor = $(".graphs-ticks").css("color");
+
   timeLineChart = new Chart(ctx, {
     type: utils.getGraphType(),
     data: {
@@ -298,6 +301,12 @@ $(function () {
                 year: "YYYY",
               },
             },
+            gridLines: {
+              color: gridColor,
+            },
+            ticks: {
+              fontColor: ticksColor,
+            },
           },
         ],
         yAxes: [
@@ -305,6 +314,10 @@ $(function () {
             stacked: true,
             ticks: {
               beginAtZero: true,
+              fontColor: ticksColor,
+            },
+            gridLines: {
+              color: gridColor,
             },
           },
         ],