Add theme chooser to Setting -> Web interface.

Signed-off-by: DL6ER <dl6er@dl6er.de>
2025-12-27 22:02:16 +00:00 · 2020-04-30 01:43:53 +02:00
parent 064a0aae9c
commit 05d5f02a36
7 changed files with 86 additions and 24 deletions
--- a/scripts/pi-hole/js/footer.js
+++ b/scripts/pi-hole/js/footer.js
@@ -107,7 +107,8 @@ $(document).ready(function () {
  var checkbox_theme = $("#checkbox_theme").text();
  $('input').icheck({
    checkboxClass: 'icheckbox_' + checkbox_theme,
-    radioClass: 'iradio_' + checkbox_theme
+    radioClass: 'iradio_' + checkbox_theme,
+    increaseArea: '20%'
  });
 });

--- a/scripts/pi-hole/php/header.php
+++ b/scripts/pi-hole/php/header.php
@@ -9,17 +9,9 @@
    require "scripts/pi-hole/php/auth.php";
    require "scripts/pi-hole/php/password.php";
    require_once "scripts/pi-hole/php/FTL.php";
+    require "scripts/pi-hole/php/theme.php";
    $scriptname = basename($_SERVER['SCRIPT_FILENAME']);

-    //$theme = "default-light";
-    $theme = "default-dark";
-    //$checkbox_theme_name = "flat";
-    //$checkbox_theme_variant = "blue";
-    $checkbox_theme_name = "polaris";
-    $checkbox_theme_variant = "polaris";
-    //$checkbox_theme_name = "futurico";
-    //$checkbox_theme_variant = "futurico";
-
    check_cors();

    // Generate CSRF token
--- a/scripts/pi-hole/php/savesettings.php
+++ b/scripts/pi-hole/php/savesettings.php
@@ -555,6 +555,12 @@ function addStaticDHCPLease($mac, $ip, $hostname) {
 				{
 					pihole_execute('-a layout traditional');
 				}
+				if(isset($_POST["webtheme"]))
+				{
+					global $available_themes;
+					if(array_key_exists($_POST["webtheme"], $available_themes))
+						exec('sudo pihole -a theme '.$_POST["webtheme"]);
+				}
 				$success .= "The webUI settings have been updated";
 				break;

--- a/scripts/pi-hole/php/theme.php
+++ b/scripts/pi-hole/php/theme.php
@@ -0,0 +1,45 @@
+<?php
+/* Pi-hole: A black hole for Internet advertisements
+*  (c) 2020 Pi-hole, LLC (https://pi-hole.net)
+*  Network-wide ad blocking via your own hardware.
+*
+*  This file is copyright under the latest version of the EUPL.
+*  Please see LICENSE file for your rights under this license. */
+
+// Array of available themes and their description
+$available_themes = [];
+$available_themes["default-light"] = ["Pi-hole default theme (light, default)", "default-light", "minimal", "blue"];
+$available_themes["default-dark"] = ["Pi-hole midnight theme (dark)", "default-dark", "polaris", "polaris"];
+$available_themes["default-dark2"] = ["Pi-hole afternoon theme (dark)", "default-dark", "futurico", "futurico"];
+
+$webtheme = "";
+// Try to load theme settings from setupVars.conf
+if(isset($setupVars['WEBTHEME']))
+    $webtheme = $setupVars['WEBTHEME'];
+
+// May be overwritten by settings tab
+if(isset($_POST["field"]) &&
+   $_POST["field"] === "webUI" &&
+   isset($_POST["webtheme"])) {
+    $webtheme = $_POST["webtheme"];
+}
+
+if(!array_key_exists($webtheme,$available_themes)) {
+        // Fallback to default (light) theme is property is not set
+        // or requested theme is not among the available
+        $webtheme = "default-light";
+}
+$theme = $available_themes[$webtheme][1];
+$checkbox_theme_name = $available_themes[$webtheme][2];
+$checkbox_theme_variant = $available_themes[$webtheme][3];
+
+error_log(print_r($available_themes,true));
+function theme_selection() {
+    global $available_themes, $webtheme;
+    foreach ($available_themes as $key => $value) {
+        error_log($key."->".$value);
+        ?><input type="radio" name="webtheme" value="<?php echo $key; ?>" id="webtheme_<?php echo $key; ?>" <?php if ($key === $webtheme){ ?>checked<?php } ?>>
+        <label for="webtheme_<?php echo $key; ?>"><?php echo $value[0]; ?></label><br><?php
+    }
+}
+?>
--- a/settings.php
+++ b/settings.php
@@ -898,7 +898,8 @@ if (isset($_GET['tab']) && in_array($_GET['tab'], array("sysadmin", "blocklists"
                                        <div class="row">
                                            <div class="col-md-12">
                                                <h4>Interface appearance</h4>
-                                                <input type="checkbox" name="boxedlayout" id="boxedlayout" value="yes" <?php if ($boxedlayout){ ?>checked<?php } ?>><label for="boxedlayout">Use boxed layout (helpful when working on large screens)</label>
+                                                <?php theme_selection(); ?>
+                                                <input type="checkbox" name="boxedlayout" id="boxedlayout" value="yes" <?php if ($boxedlayout){ ?>checked<?php } ?>><label for="boxedlayout">Use boxed layout (for large screens)</label>
                                                <h4>CPU Temperature Unit</h4>
                                                <input type="radio" name="tempunit" value="C" id="tempunit_C" <?php if ($temperatureunit === "C"){ ?>checked<?php } ?>><label for="tempunit_C">&nbsp;Celsius</label><br>
                                                <input type="radio" name="tempunit" value="K" id="tempunit_K" <?php if ($temperatureunit === "K"){ ?>checked<?php } ?>><label for="tempunit_K">&nbsp;Kelvin</label><br>
--- a/style/themes/default-dark.css
+++ b/style/themes/default-dark.css
@@ -257,11 +257,12 @@ h4 {
 }
 .main-footer .nav-tabs,
 .nav-tabs-custom .nav-tabs {
-  border-bottom-color: #353c42;
+  background-color: #30383f;
+  border-bottom-color: #2f363b;
 }
 .main-footer .tab-content,
 .nav-tabs-custom .tab-content {
-  background-color: #272c30;
+  background-color: #30383f;
 }
 .nav-tabs-custom > .nav-tabs > li.active > a {
  border-left-color: #353c42;
@@ -279,16 +280,6 @@ h4 {
 .nav-tabs-custom > .nav-tabs > li > a {
  color: #bec5cb;
 }
-.form-group .input-group-addon,
-.input-group .input-group-addon,
-.form-group input,
-.input-group input,
-.form-group textarea,
-.input-group textarea {
-  background-color: #353c42;
-  color: #bec5cb;
-  border: 1px solid #353c42;
-}
 .list-group {
  color: #bec5cb;
  background-color: #272c30;
@@ -441,16 +432,24 @@ td.highlight {
  background-color: #1e2226;
  color: #bec5cb;
 }
+input,
 select,
 select.form-control,
+.form-group .input-group-addon,
+.input-group .input-group-addon,
+.form-group input,
+.input-group input,
+.form-group textarea,
+.input-group textarea 
 .daterangepicker select.hourselect,
 .daterangepicker select.minuteselect,
 .daterangepicker select.secondselect,
 .daterangepicker select.ampmselect,
+.form-control,
 div.dataTables_wrapper div.dataTables_length select {
  background-color: #353c42;
  color: #bec5cb;
-  border: 1px solid #353c42;
+  border: 1px solid #3d444b;
 }
 .nav-tabs-custom > .nav-tabs > li.active > a {
  color: #bec5cb;
@@ -503,4 +502,15 @@ fieldset[disabled] .form-control {
 }
 .network-gradient {
  background-image: linear-gradient(to right, #114100 0%, #525200 100%);
+}
+
+.icheckbox_polaris,
+.icheckbox_futurico,
+.icheckbox_minimal-blue {
+	margin-right: 10px;
+}
+.iradio_polaris,
+.iradio_futurico,
+.iradio_minimal-blue {
+	margin-right: 8px;
 }
--- a/style/themes/default-light.css
+++ b/style/themes/default-light.css
@@ -216,3 +216,10 @@ td.highlight {
 .network-gradient {
  background-image: linear-gradient(to right, #e7ffde 0%, #ffffdf 100%);
 }
+
+.icheckbox_minimal-blue {
+	margin-right: 10px;
+}
+.iradio_minimal-blue {
+	margin-right: 8px;
+}