diff --git a/db_graph.php b/db_graph.php
index 236bde24..cdcd53c1 100644
--- a/db_graph.php
+++ b/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>
diff --git a/scripts/pi-hole/js/db_graph.js b/scripts/pi-hole/js/db_graph.js
index 949010a9..42cd9616 100644
--- a/scripts/pi-hole/js/db_graph.js
+++ b/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,
             },
           },
         ],