No not use per-browser settings for the theme to avoid flashing pages on navigation.

Signed-off-by: DL6ER <dl6er@dl6er.de>

scripts/pi-hole/php/header.php

@@ -10,7 +10,6 @@
     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']);
     $hostname = gethostname() ? gethostname() : "";
 
@@ -152,6 +151,11 @@
     <meta name="msapplication-TileImage" content="img/favicons/mstile-150x150.png">
     <meta name="theme-color" content="#367fa9">
 
+<?php if ($darkmode) { ?>
+    <style>
+        html { background-color: #000; }
+    </style>
+<?php } ?>
     <link rel="stylesheet" href="style/vendor/SourceSansPro/SourceSansPro.css">
     <link rel="stylesheet" href="style/vendor/bootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" href="style/vendor/font-awesome/css/all.min.css">
@@ -164,8 +168,8 @@
     <link rel="stylesheet" href="style/vendor/bootstrap-select.min.css">
     <link rel="stylesheet" href="style/vendor/bootstrap-toggle.min.css">
 <?php } ?>
-    <link rel="stylesheet" href="style/vendor/icheck-material.min.css">
     <link rel="stylesheet" href="style/pi-hole.css">
+    <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>
@@ -194,6 +198,7 @@ if($auth) {
 ?>
 
 <!-- Send token to JS -->
+<div id="checkbox_theme" hidden><?php echo $checkbox_theme_name; ?><?php if($checkbox_theme_name !== $checkbox_theme_variant){ echo "-$checkbox_theme_variant"; } ?></div>
 <div id="enableTimer" hidden><?php if(file_exists("../custom_disable_timer")){ echo file_get_contents("../custom_disable_timer"); } ?></div>
 <div class="wrapper">
     <header class="main-header">

scripts/pi-hole/php/theme.php

@@ -0,0 +1,47 @@
+<?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 = [];
+/* Array key = name used internally, not shown to the user
+*  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
+*/
+$available_themes["default-light"] = ["Pi-hole default theme (light, default)", false, "default-light"];
+$available_themes["default-dark"] = ["Pi-hole midnight theme (dark)", true, "default-dark"];
+
+$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";
+}
+
+$darkmode = $available_themes[$webtheme][1];
+$theme = $available_themes[$webtheme][2];
+
+function theme_selection() {
+    global $available_themes, $webtheme;
+    foreach ($available_themes as $key => $value) {
+        ?><div><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; ?>"><strong><?php echo $value[0]; ?></strong></label></div><?php
+    }
+}
+?>