Add High contrast dark theme

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
pi-hole · Feb 8, 2023 · b92ce0e · b92ce0e
1 parent 8931259
commit b92ce0e
Show file tree

Hide file tree

Showing 5 changed files with 918 additions and 11 deletions.
diff --git a/scripts/pi-hole/js/db_graph.js b/scripts/pi-hole/js/db_graph.js
@@ -208,10 +208,10 @@ function updateQueriesOverTime() {
 
 $(function () {
   var ctx = document.getElementById("queryOverTimeChart").getContext("2d");
-  var blockedColor = utils.getCSSval("queries-blocked","background-color");
-  var permittedColor = utils.getCSSval("queries-permitted","background-color");
-  var gridColor = utils.getCSSval("graphs-grid","background-color");
-  var ticksColor = utils.getCSSval("graphs-ticks","color");
+  var blockedColor = utils.getCSSval("queries-blocked", "background-color");
+  var permittedColor = utils.getCSSval("queries-permitted", "background-color");
+  var gridColor = utils.getCSSval("graphs-grid", "background-color");
+  var ticksColor = utils.getCSSval("graphs-ticks", "color");
 
   timeLineChart = new Chart(ctx, {
     type: utils.getGraphType(),

diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
@@ -232,8 +232,8 @@ function updateQueriesOverTime() {
     timeLineChart.data.datasets = [];
 
     var labels = ["Blocked DNS Queries", "Permitted DNS Queries"];
-    var blockedColor = utils.getCSSval("queries-blocked","background-color");
-    var permittedColor = utils.getCSSval("queries-permitted","background-color");
+    var blockedColor = utils.getCSSval("queries-blocked", "background-color");
+    var permittedColor = utils.getCSSval("queries-permitted", "background-color");
     var colors = [blockedColor, permittedColor];
 
     // Collect values and colors, and labels
@@ -862,8 +862,8 @@ $(function () {
   getMaxlogage();
   updateSummaryData();
 
-  var gridColor = utils.getCSSval("graphs-grid","background-color");
-  var ticksColor = utils.getCSSval("graphs-ticks","color");
+  var gridColor = utils.getCSSval("graphs-grid", "background-color");
+  var ticksColor = utils.getCSSval("graphs-ticks", "color");
   var ctx = document.getElementById("queryOverTimeChart").getContext("2d");
   timeLineChart = new Chart(ctx, {
     type: utils.getGraphType(),

diff --git a/scripts/pi-hole/js/utils.js b/scripts/pi-hole/js/utils.js
@@ -410,9 +410,9 @@ function changeBulkDeleteStates(table) {
 
 function getCSSval(cssclass, cssproperty) {
   var elem = $("<div class='" + cssclass + "'></div>"),
-    val = elem.appendTo('body').css(cssproperty);
-    elem.remove();
-    return val;
+    val = elem.appendTo("body").css(cssproperty);
+  elem.remove();
+  return val;
 }
 
 window.utils = (function () {

diff --git a/scripts/pi-hole/php/theme.php b/scripts/pi-hole/php/theme.php
@@ -19,6 +19,7 @@
 $available_themes['default-dark'] = array('Pi-hole midnight theme (dark)', true, 'default-dark', '#272c30');
 $available_themes['default-darker'] = array('Pi-hole deep-midnight theme (dark)', true, 'default-darker', '#2e6786');
 $available_themes['high-contrast'] = array('High contrast theme (light)', false, 'high-contrast', '#0078a0');
+$available_themes['high-contrast-dark'] = array('High contrast dark theme (dark)', false, 'high-contrast-dark', '#0077c7');
 // Option to have the theme go with the device dark mode setting, always set the background to black to avoid flashing
 $available_themes['default-auto'] = array('Pi-hole auto theme (light/dark)', true, 'default-auto', '#367fa9');
 $available_themes['lcars'] = array('Star Trek LCARS theme (dark)', true, 'lcars', '#4488FF');