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

scripts/pi-hole/php/header.php

@@ -11,6 +11,9 @@
     require_once "scripts/pi-hole/php/FTL.php";
     $scriptname = basename($_SERVER['SCRIPT_FILENAME']);
 
+    //$theme = "default-light";
+    $theme = "default-dark";
+
     check_cors();
 
     // Generate CSRF token
@@ -202,12 +205,11 @@
     <link rel="stylesheet" href="style/vendor/daterangepicker.css">
 
     <link rel="stylesheet" href="style/vendor/AdminLTE.min.css">
-    <link rel="stylesheet" href="style/vendor/skin-blue.min.css">
     <link rel="stylesheet" href="style/vendor/animate.css">
-
     <link rel="stylesheet" href="style/pi-hole.css">
-    <noscript><link rel="stylesheet" href="style/vendor/js-warn.css"></noscript>
+    <link rel="stylesheet" href="style/themes/<?php echo $theme; ?>.css">
 
+    <noscript><link rel="stylesheet" href="style/vendor/js-warn.css"></noscript>
     <script src="scripts/vendor/jquery.min.js"></script>
     <script src="scripts/vendor/jquery-ui.min.js"></script>
     <script src="style/vendor/bootstrap/js/bootstrap.min.js"></script>
@@ -226,7 +228,7 @@
     <script src="scripts/vendor/moment.min.js"></script>
     <script src="scripts/vendor/Chart.min.js"></script>
 </head>
-<body class="hold-transition skin-blue sidebar-mini <?php if($boxedlayout){ ?>layout-boxed<?php } ?>">
+<body class="hold-transition sidebar-mini <?php if($boxedlayout){ ?>layout-boxed<?php } ?>">
  <noscript>
 <!-- JS Warning -->
 <div>