Added the option for an automatic dark mode based on the device status

Signed-off-by: = <9060360+AlexLamond@users.noreply.github.com>
Signed-off-by: Alex Lamond <9060360+AlexLamond@users.noreply.github.com>

scripts/pi-hole/php/theme.php

@@ -16,6 +16,8 @@ $available_themes = array();
 $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");
+// Option to have the theme go with the device dark mode setting, always set the background to black to avoid flashing
+$available_themes["custom-auto"] = array("Pi-hole auto theme (light/dark)", true, "custom-auto");
 
 $webtheme = "";
 // Try to load theme settings from setupVars.conf
@@ -45,4 +47,5 @@ function theme_selection() {
         <label for="webtheme_<?php echo $key; ?>"><strong><?php echo $value[0]; ?></strong></label></div><?php
     }
 }
-?>
+
+?>

style/themes/custom-auto.css

@@ -0,0 +1,7 @@
+/* Code courtesy of https://blog.jim-nielsen.com/2019/conditional-syntax-highlighting-in-dark-mode-with-css-imports/ */
+
+/* Assume light mode by default */
+@import "default-light.css" screen;
+/* Supersede dark mode when applicable */  
+@import "default-dark.css" screen and (prefers-color-scheme: dark);
+