From 5538af20b8afea77f146715c19ddcf8363ca4958 Mon Sep 17 00:00:00 2001 From: AlexLamond <9060360+AlexLamond@users.noreply.github.com> Date: Mon, 21 Jun 2021 18:39:29 +0100 Subject: [PATCH] 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 | 5 ++++- style/themes/custom-auto.css | 7 +++++++ 2 files changed, 11 insertions(+), 1 deletion(-) create mode 100644 style/themes/custom-auto.css diff --git a/scripts/pi-hole/php/theme.php b/scripts/pi-hole/php/theme.php index e9b0d45d..02d60906 100644 --- a/scripts/pi-hole/php/theme.php +++ b/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() { \ No newline at end of file + +?> diff --git a/style/themes/custom-auto.css b/style/themes/custom-auto.css new file mode 100644 index 00000000..2a277e75 --- /dev/null +++ b/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); +