From c36cbb20171562ffd38eae070a497ed7eaabf7f7 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Wed, 19 Apr 2023 16:53:14 -0300
Subject: [PATCH] Improve clients graphic colors

- add the ability to select colors for the chart, per theme;
- improve contrast between bar colors and background color;
- move color definitions to CSS and use a javascript function to
  read the colors.

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/js/index.js | 22 ++++------------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index f27b1749..3be4e804 100644
--- a/scripts/pi-hole/js/index.js
+++ b/scripts/pi-hole/js/index.js
@@ -11,24 +11,10 @@
 var timeLineChart, clientsChart;
 var queryTypePieChart, forwardDestinationPieChart;
 
-var THEME_COLORS = [
-  "#f56954",
-  "#3c8dbc",
-  "#00a65a",
-  "#00c0ef",
-  "#f39c12",
-  "#0073b7",
-  "#001f3f",
-  "#39cccc",
-  "#3d9970",
-  "#01ff70",
-  "#ff851b",
-  "#f012be",
-  "#8e24aa",
-  "#d81b60",
-  "#222222",
-  "#d2d6de",
-];
+var THEME_COLORS = [];
+for (var i = 1; i <= 20; i++) {
+  THEME_COLORS[i - 1] = $(":root").css("--graph-color" + i);
+}
 
 var customTooltips = function (context) {
   var tooltip = context.tooltip;