Add color-scheme: dark to avoid problems with browser's "Force dark…

… mode" option Some browsers have an option to force a "fake" dark mode. This darkens most elements and uses light text, but the forced mode fails for some properties on a few elements. Using the CSS `color-scheme: dark` property disables the `force-dark-mode` browser property and applies only the theme CSS.
pi-hole · Apr 8, 2023 · 7c2ebef · 7c2ebef
2 parents 8f95ec7 + cd887a2
commit 7c2ebef
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 0 deletions.
diff --git a/style/themes/default-dark.css b/style/themes/default-dark.css
@@ -12,6 +12,11 @@
   --datatable-bgcolor: rgba(64, 76, 88, 0.8);
 }
 
+/* fix #2554: browser not detecting dark mode */
+html {
+  color-scheme: dark;
+}
+
 body {
   background-color: #353c42;
   color: #bec5cb;

diff --git a/style/themes/default-darker.css b/style/themes/default-darker.css
@@ -32,6 +32,8 @@ _______|_______/__/ ____ \__\__|___\__\__|___\__\____
 /* User-Agent Style */
 html {
   background-color: #181a1b !important;
+  /* fix #2554: browser not detecting dark mode */
+  color-scheme: dark;
 }
 html,
 body,

diff --git a/style/themes/high-contrast-dark.css b/style/themes/high-contrast-dark.css
@@ -36,6 +36,11 @@
   transition: none !important;
 }
 
+/* fix #2554: browser not detecting dark mode */
+html {
+  color-scheme: dark;
+}
+
 body {
   font-size: 15px;
   color: var(--main-text-color);

diff --git a/style/themes/lcars.css b/style/themes/lcars.css
@@ -24,6 +24,8 @@
 /*** General ***/
 html {
   font-size: 17px;
+  /* fix #2554: browser not detecting dark mode */
+  color-scheme: dark;
 }
 
 body {