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/js/footer.js

@@ -127,7 +127,13 @@ function testCookies() {
 }
 
 function initCheckboxRadioStyle() {
+  function getCheckboxURL(style) {
+    var extra = style.startsWith("material-") ? "material" : "bootstrap";
+    return "style/vendor/icheck-" + extra + ".min.css"
+  }
+
   function applyCheckboxRadioStyle(style) {
+    boxsheet.attr('href', getCheckboxURL(style));
     var sel = $("input[type='radio'],input[type='checkbox']");
     sel.parent().removeClass();
     sel.parent().addClass("icheck-" + style);
@@ -136,9 +142,12 @@ function initCheckboxRadioStyle() {
   // Read from local storage, initialize if needed
   var chkboxStyle = localStorage.getItem("theme_icheck");
   if (chkboxStyle === null) {
-    chkboxStyle = "material-blue";
+    chkboxStyle = "primary";
   }
 
+  var boxsheet = $('<link href="' + getCheckboxURL(chkboxStyle) + '" rel="stylesheet" />');
+  boxsheet.appendTo('head');
+
   applyCheckboxRadioStyle(chkboxStyle);
 
   // Add handler when on settings page
@@ -184,33 +193,6 @@ function initBoxedLayout() {
   }
 }
 
-function initTheme() {
-  function getThemeURL(themename) {
-    return "style/themes/" + themename + ".css";
-  }
-
-  // Read from local storage, initialize if needed
-  var themename = localStorage.getItem("css-theme");
-  if (themename === null) {
-    themename = "default-light";
-    localStorage.setItem("css-theme", themename);
-  }
-
-  var themesheet = $('<link href="' + getThemeURL(themename) + '" rel="stylesheet" />');
-  themesheet.appendTo("head");
-
-  // Add handler when on settings page
-  var themeSelector = $("#theme-selector");
-  if (themeSelector !== null) {
-    themeSelector.val(themename);
-    themeSelector.change(function () {
-      themename = $(this).val();
-      localStorage.setItem("css-theme", themename);
-      themesheet.attr("href", getThemeURL(themename));
-    });
-  }
-}
-
 function initCPUtemp() {
   function setCPUtemp(unit) {
     localStorage.setItem("tempunit", tempunit);
@@ -269,7 +251,6 @@ $(function () {
   // Apply per-browser styling settings
   initCheckboxRadioStyle();
   initBoxedLayout();
-  initTheme();
   initCPUtemp();
 
   if (typeof initpage === "function") {

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
+    }
+}
+?>