Introducing 2 new high contrast themes (pi-hole#2522)

stonerl · Feb 24, 2023 · 44f3b41 · 44f3b41
2 parents 6c03bde + ae94c34
commit 44f3b41
Show file tree

Hide file tree

Showing 15 changed files with 1,567 additions and 65 deletions.
diff --git a/db_graph.php b/db_graph.php
@@ -10,11 +10,6 @@
 
 require 'scripts/pi-hole/php/header_authenticated.php';
 ?>
-<!-- Sourceing CSS colors from stylesheet to be used in JS code -->
-<span class="queries-permitted"></span>
-<span class="queries-blocked"></span>
-<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/db_lists.php b/db_lists.php
@@ -11,10 +11,6 @@
 require 'scripts/pi-hole/php/header_authenticated.php';
 ?>
 
-<!-- Sourceing CSS colors from stylesheet to be used in JS code -->
-<span class="queries-permitted"></span>
-<span class="queries-blocked"></span>
-
 <!-- Title -->
 <div class="page-header">
     <h1>Compute Top Lists from the Pi-hole query database</h1>

diff --git a/index.php b/index.php
@@ -11,11 +11,6 @@
 require 'scripts/pi-hole/php/header_authenticated.php';
 require_once 'scripts/pi-hole/php/gravity.php';
 ?>
-<!-- Sourceing CSS colors from stylesheet to be used in JS code -->
-<span class="queries-permitted"></span>
-<span class="queries-blocked"></span>
-<span class="graphs-grid"></span>
-<span class="graphs-ticks"></span>
 <!-- Small boxes (Stat box) -->
 <div class="row">
     <div class="col-lg-3 col-sm-6">

diff --git a/scripts/pi-hole/js/auditlog.js b/scripts/pi-hole/js/auditlog.js
@@ -33,8 +33,8 @@ function updateTopLists() {
             "</td> <td>" +
             data.top_queries[domain] +
             "</td> <td>" +
-            '<button type="button" class="btn btn-default btn-xs text-red"><i class="fa fa-ban"></i> Blacklist</button>' +
-            '<button type="button" class="btn btn-default btn-xs text-orange"><i class="fa fa-balance-scale"></i> Audit</button>' +
+            '<button type="button" class="btn btn-default btn-xs text-red btn-blacklist"><i class="fa fa-ban"></i> Blacklist</button>' +
+            '<button type="button" class="btn btn-default btn-xs text-orange btn-audit"><i class="fa fa-balance-scale"></i> Audit</button>' +
             "</td> </tr> "
         );
       }
@@ -58,7 +58,7 @@ function updateTopLists() {
               "</td> <td>" +
               data.top_ads[domain] +
               "</td> <td>" +
-              '<button type="button" class="btn btn-default btn-sm text-orange"><i class="fa fa-balance-scale"></i> Audit</button>' +
+              '<button type="button" class="btn btn-default btn-sm text-orange btn-audit"><i class="fa fa-balance-scale"></i> Audit</button>' +
               "</td> </tr> "
           );
         } else {
@@ -69,8 +69,8 @@ function updateTopLists() {
               "</td> <td>" +
               data.top_ads[domain] +
               "</td> <td>" +
-              '<button type="button" class="btn btn-default btn-xs text-green"><i class="fas fa-check"></i> Whitelist</button>' +
-              '<button type="button" class="btn btn-default btn-xs text-orange"><i class="fa fa-balance-scale"></i> Audit</button>' +
+              '<button type="button" class="btn btn-default btn-xs text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>' +
+              '<button type="button" class="btn btn-default btn-xs text-orange btn-audit"><i class="fa fa-balance-scale"></i> Audit</button>' +
               "</td> </tr> "
           );
         }

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 = $(".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 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/db_queries.js b/scripts/pi-hole/js/db_queries.js
@@ -265,7 +265,7 @@ $(function () {
         case 1:
           fieldtext = "<span class='text-red'>Blocked (gravity)</span>";
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           blocked = true;
           break;
         case 2:
@@ -275,24 +275,24 @@ $(function () {
               : "<span class='text-green'>OK</span> (answered by <br class='hidden-lg'>";
           fieldtext += (data.length > 5 && data[5] !== "N/A" ? data[5] : "") + ")" + dnssecStatus;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-red"><i class="fa fa-ban"></i> Blacklist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-red btn-blacklist"><i class="fa fa-ban"></i> Blacklist</button>';
           break;
         case 3:
           fieldtext =
             "<span class='text-green'>OK</span> <br class='hidden-lg'>(cache)" + dnssecStatus;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-red"><i class="fa fa-ban"></i> Blacklist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-red btn-blacklist"><i class="fa fa-ban"></i> Blacklist</button>';
           break;
         case 4:
           fieldtext = "<span class='text-red'>Blocked <br class='hidden-lg'>(regex blacklist)";
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           blocked = true;
           break;
         case 5:
           fieldtext = "<span class='text-red'>Blocked <br class='hidden-lg'>(exact blacklist)";
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           blocked = true;
           break;
         case 6:
@@ -313,21 +313,21 @@ $(function () {
           fieldtext =
             "<span class='text-red'>Blocked <br class='hidden-lg'>(gravity, CNAME)</span>";
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           blocked = true;
           break;
         case 10:
           fieldtext =
             "<span class='text-red'>Blocked <br class='hidden-lg'>(regex blacklist, CNAME)</span>";
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           blocked = true;
           break;
         case 11:
           fieldtext =
             "<span class='text-red'>Blocked <br class='hidden-lg'>(exact blacklist, CNAME)</span>";
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           blocked = true;
           break;
         case 12:
@@ -341,7 +341,7 @@ $(function () {
             "<span class='text-green'>OK</span> <br class='hidden-lg'>(already forwarded)" +
             dnssecStatus;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-red"><i class="fa fa-ban"></i> Blacklist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-red btn-blacklist"><i class="fa fa-ban"></i> Blacklist</button>';
           break;
         case 15:
           fieldtext =
@@ -358,7 +358,7 @@ $(function () {
             "<span class='text-orange'>OK</span> <br class='hidden-lg'>(stale cache)" +
             dnssecStatus;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-red"><i class="fa fa-ban"></i> Blacklist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-red btn-blacklist"><i class="fa fa-ban"></i> Blacklist</button>';
           break;
         default:
           fieldtext = "Unknown (" + parseInt(data[4], 10) + ")";

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 = $(".queries-blocked").css("background-color");
-    var permittedColor = $(".queries-permitted").css("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 = $(".graphs-grid").css("background-color");
-  var ticksColor = $(".graphs-ticks").css("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/queries.js b/scripts/pi-hole/js/queries.js
@@ -124,7 +124,7 @@ $(function () {
         case "1":
           fieldtext = "<span class='text-red'>Blocked (gravity)</span>";
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           blocked = true;
           break;
         case "2":
@@ -135,25 +135,25 @@ $(function () {
           fieldtext +=
             (data.length > 10 && data[10] !== "N/A" ? data[10] : "") + ")" + dnssecStatus;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-red"><i class="fa fa-ban"></i> Blacklist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-red btn-blacklist"><i class="fa fa-ban"></i> Blacklist</button>';
           break;
         case "3":
           fieldtext =
             "<span class='text-green'>OK</span> <br class='hidden-lg'>(cache)" + dnssecStatus;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-red"><i class="fa fa-ban"></i> Blacklist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-red btn-blacklist"><i class="fa fa-ban"></i> Blacklist</button>';
           break;
         case "4":
           fieldtext = "<span class='text-red'>Blocked <br class='hidden-lg'>(regex blacklist)";
           blocked = true;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           break;
         case "5":
           fieldtext = "<span class='text-red'>Blocked <br class='hidden-lg'>(exact blacklist)";
           blocked = true;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           break;
         case "6":
           fieldtext = "<span class='text-red'>Blocked <br class='hidden-lg'>(external, IP)";
@@ -177,23 +177,23 @@ $(function () {
             "<span class='text-red'>Blocked <br class='hidden-lg'>(gravity, CNAME)</span>";
           blocked = true;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           isCNAME = true;
           break;
         case "10":
           fieldtext =
             "<span class='text-red'>Blocked <br class='hidden-lg'>(regex blacklist, CNAME)</span>";
           blocked = true;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           isCNAME = true;
           break;
         case "11":
           fieldtext =
             "<span class='text-red'>Blocked <br class='hidden-lg'>(exact blacklist, CNAME)</span>";
           blocked = true;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-green"><i class="fas fa-check"></i> Whitelist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-green btn-whitelist"><i class="fas fa-check"></i> Whitelist</button>';
           isCNAME = true;
           break;
         case "12":
@@ -207,7 +207,7 @@ $(function () {
             "<span class='text-green'>OK</span> <br class='hidden-lg'>(already forwarded)" +
             dnssecStatus;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-red"><i class="fa fa-ban"></i> Blacklist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-red btn-blacklist"><i class="fa fa-ban"></i> Blacklist</button>';
           break;
         case "15":
           fieldtext =
@@ -224,7 +224,7 @@ $(function () {
             "<span class='text-orange'>OK</span> <br class='hidden-lg'>(stale cache)" +
             dnssecStatus;
           buttontext =
-            '<button type="button" class="btn btn-default btn-sm text-red"><i class="fa fa-ban"></i> Blacklist</button>';
+            '<button type="button" class="btn btn-default btn-sm text-red btn-blacklist"><i class="fa fa-ban"></i> Blacklist</button>';
           break;
         default:
           fieldtext = "Unknown (" + parseInt(data[4], 10) + ")";

diff --git a/scripts/pi-hole/js/utils.js b/scripts/pi-hole/js/utils.js
@@ -408,6 +408,13 @@ function changeBulkDeleteStates(table) {
   }
 }
 
+function getCSSval(cssclass, cssproperty) {
+  var elem = $("<div class='" + cssclass + "'></div>"),
+    val = elem.appendTo("body").css(cssproperty);
+  elem.remove();
+  return val;
+}
+
 window.utils = (function () {
   return {
     escapeHtml: escapeHtml,
@@ -432,5 +439,6 @@ window.utils = (function () {
     colorBar: colorBar,
     checkMessages: checkMessages,
     changeBulkDeleteStates: changeBulkDeleteStates,
+    getCSSval: getCSSval,
   };
 })();
diff --git a/scripts/pi-hole/php/header.php b/scripts/pi-hole/php/header.php
@@ -26,21 +26,13 @@
     <link rel="icon" href="img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
     <link rel="icon" href="img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
     <link rel="manifest" href="img/favicons/manifest.json">
-    <link rel="mask-icon" href="img/favicons/safari-pinned-tab.svg" color="#367fa9">
+    <link rel="mask-icon" href="img/favicons/safari-pinned-tab.svg" color="<?php echo $theme_color; ?>">
     <link rel="shortcut icon" href="img/favicons/favicon.ico">
-    <meta name="msapplication-TileColor" content="#367fa9">
+    <meta name="msapplication-TileColor" content="<?php echo $theme_color; ?>">
     <meta name="msapplication-TileImage" content="img/favicons/mstile-150x150.png">
 
     <!-- Theme styles -->
-<?php if ($theme == 'default-light') { ?>
-    <meta name="theme-color" content="#367fa9">
-<?php } elseif ($theme == 'default-dark') { ?>
-    <meta name="theme-color" content="#272c30">
-<?php } elseif ($theme == 'default-darker') { ?>
-    <meta name="theme-color" content="#2e6786">
-<?php } elseif ($theme == 'lcars') { ?>
-    <meta name="theme-color" content="#4488FF">
-<?php } ?>
+    <meta name="theme-color" content="<?php echo $theme_color; ?>">
 
 <?php if ($darkmode) { ?>
     <style>

diff --git a/scripts/pi-hole/php/header_authenticated.php b/scripts/pi-hole/php/header_authenticated.php
@@ -206,7 +206,7 @@ function getTemperature()
                         <ul class="dropdown-menu">
                             <!-- User image -->
                             <li class="user-header">
-                                <img src="img/logo.svg" alt="Pi-hole Logo" style="border: 0" width="90" height="90">
+                                <img class="logo-img" src="img/logo.svg" alt="Pi-hole Logo" style="border: 0" width="90" height="90">
                                 <p>
                                     Open Source Ad Blocker
                                 </p>

diff --git a/scripts/pi-hole/php/sidebar.php b/scripts/pi-hole/php/sidebar.php
@@ -5,7 +5,7 @@
             <!-- Sidebar user panel -->
             <div class="user-panel">
                 <div class="pull-left image">
-                    <img src="img/logo.svg" alt="Pi-hole logo">
+                    <img class="logo-img" src="img/logo.svg" alt="Pi-hole logo">
                 </div>
                 <div class="pull-left info">
                     <p>Status</p>

diff --git a/scripts/pi-hole/php/theme.php b/scripts/pi-hole/php/theme.php
@@ -13,13 +13,16 @@
 *  Array[0] = Description
 *  Array[1] = Is this a dark mode theme? (Sets background to black during page reloading to avoid white "flashing")
 *  Array[2] = Style sheet name
+*  Array[3] = Theme color
 */
-$available_themes['default-light'] = array('Pi-hole default theme (light, default)', false, 'default-light');
-$available_themes['default-dark'] = array('Pi-hole midnight theme (dark)', true, 'default-dark');
-$available_themes['default-darker'] = array('Pi-hole deep-midnight theme (dark)', true, 'default-darker');
+$available_themes['default-light'] = array('Pi-hole default theme (light, default)', false, 'default-light', '#367fa9');
+$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 light', false, 'high-contrast', '#0078a0');
+$available_themes['high-contrast-dark'] = array('High contrast 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');
-$available_themes['lcars'] = array('Star Trek LCARS theme (dark)', true, 'lcars');
+$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');
 
 $webtheme = '';
 // Try to load theme settings from setupVars.conf
@@ -42,6 +45,7 @@
 
 $darkmode = $available_themes[$webtheme][1];
 $theme = $available_themes[$webtheme][2];
+$theme_color = $available_themes[$webtheme][3];
 
 function theme_selection()
 {