From 23828df3db67af89f082cd01fbfd71baf4416495 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20K=C3=B6nig?= <ckoenig@posteo.de>
Date: Fri, 19 Nov 2021 14:06:47 +0100
Subject: [PATCH] Use theme gridColor and ticksColor in long time graph
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Christian König <ckoenig@posteo.de>
---
 db_graph.php                   |  3 +++
 scripts/pi-hole/js/db_graph.js | 13 +++++++++++++
 2 files changed, 16 insertions(+)

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,
             },
           },
         ],