Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introducing new high contrast themes #2522

Merged
merged 4 commits into from
Feb 24, 2023
Merged

Introducing new high contrast themes #2522

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
aa5068b
Using a new function to retrieve CSS values from classes
rdwebdesign Jan 26, 2023
f59f587
Adding the new themes to the web interface settings
rdwebdesign Feb 11, 2023
c74162e
Preparing PHP and javascript files for the new themes
rdwebdesign Feb 11, 2023
ae94c34
Add CSS for two new high-contrast themes
rdwebdesign Jan 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions db_graph.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 0 additions & 4 deletions db_lists.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 0 additions & 5 deletions index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
10 changes: 5 additions & 5 deletions scripts/pi-hole/js/auditlog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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> "
);
}
Expand All @@ -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 {
Expand All @@ -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> "
);
}
Expand Down
8 changes: 4 additions & 4 deletions scripts/pi-hole/js/db_graph.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down
20 changes: 10 additions & 10 deletions scripts/pi-hole/js/db_queries.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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:
Expand All @@ -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:
Expand All @@ -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 =
Expand All @@ -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) + ")";
Expand Down
8 changes: 4 additions & 4 deletions scripts/pi-hole/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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(),
Expand Down
20 changes: 10 additions & 10 deletions scripts/pi-hole/js/queries.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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":
Expand All @@ -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)";
Expand All @@ -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":
Expand All @@ -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 =
Expand All @@ -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) + ")";
Expand Down
8 changes: 8 additions & 0 deletions scripts/pi-hole/js/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -432,5 +439,6 @@ window.utils = (function () {
colorBar: colorBar,
checkMessages: checkMessages,
changeBulkDeleteStates: changeBulkDeleteStates,
getCSSval: getCSSval,
};
})();
14 changes: 3 additions & 11 deletions scripts/pi-hole/php/header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion scripts/pi-hole/php/header_authenticated.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion scripts/pi-hole/php/sidebar.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
14 changes: 9 additions & 5 deletions scripts/pi-hole/php/theme.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -42,6 +45,7 @@

$darkmode = $available_themes[$webtheme][1];
$theme = $available_themes[$webtheme][2];
$theme_color = $available_themes[$webtheme][3];

function theme_selection()
{
Expand Down
Loading