Use CSS properties to define colors for each theme

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
pi-hole · Jan 24, 2025 · bd7c4bf · bd7c4bf
1 parent 6f93329
commit bd7c4bf
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 24 deletions.
diff --git a/style/themes/default-dark.css b/style/themes/default-dark.css
@@ -11,6 +11,12 @@
 :root {
   --datatable-bgcolor: rgba(64, 76, 88, 0.8);
   --overlay-bgcolor: var(--datatable-bgcolor);
+
+  /* Dashboard graphic bars */
+  --allowed-color: #12b660;
+  --blocked-color: #822d21;
+  --cached-color: #44649C;
+  --other-color: #969798;
 }
 
 /* fix #2554: browser not detecting dark mode */

diff --git a/style/themes/default-darker.css b/style/themes/default-darker.css
@@ -110,6 +110,12 @@ select:-webkit-autofill {
   --darkreader-selection-text: #e8e6e3;
   --datatable-bgcolor: rgb(35, 47, 52);
   --overlay-bgcolor: rgba(35, 47, 52, 0.7);
+
+  /* Dashboard graphic bars */
+  --allowed-color: #12b660;
+  --blocked-color: #822d21;
+  --cached-color: #44649C;
+  --other-color: #969798;
 }
 
 /* Modified CSS */

diff --git a/style/themes/high-contrast-dark.css b/style/themes/high-contrast-dark.css
@@ -25,10 +25,11 @@
   --network-older: #182840;
   --network-never: #182028;
 
-  --allowed-color: var(--primary-color);
-  --blocked-color: var(--danger-color);
-  --cached-color: #a86600;
-  --other-color: #0077a6;
+  /* Dashboard graphic bars */
+  --allowed-color: #12b660;
+  --blocked-color: #822d21;
+  --cached-color: #44649C;
+  --other-color: #969798;
 
   --datatable-bgcolor: rgba(18, 44, 68, 0.3);
   --overlay-bgcolor: rgba(24, 28, 32, 0.8);

diff --git a/style/themes/high-contrast.css b/style/themes/high-contrast.css
@@ -23,10 +23,11 @@
   --network-older: #cce6fe;
   --network-never: #ffca98;
 
-  --allowed-color: #3c7;
-  --blocked-color: var(--danger-color);
-  --cached-color: var(--primary-color);
-  --other-color: #0077a6;
+  /* Dashboard graphic bars colors */
+  --allowed-color: #009960;
+  --blocked-color: #b00000;
+  --cached-color: #acf;
+  --other-color: #908878;
 
   --overlay-bgcolor: rgba(255, 255, 255, 0.8);
 }

diff --git a/style/themes/lcars.css b/style/themes/lcars.css
@@ -11,6 +11,12 @@
   --net-old-color: #125;
   --net-older-color: #1c2228;
   --datatable-bgcolor: var(--net-old-color);
+
+  /* Dashboard graphic bars */
+  --allowed-color: #073;
+  --blocked-color: #d43;
+  --cached-color: #7bf;
+  --other-color: #eca;
 }
 
 .sidebar-collapse {
@@ -2005,22 +2011,6 @@ input[type="password"]::-webkit-caps-lock-indicator {
   background-color: #48f;
 }
 
-.queries-permitted {
-  background-color: rgb(0, 133, 72);
-}
-
-.queries-blocked {
-  background-color: rgb(196, 50, 50);
-}
-
-.queries-cached {
-  background-color: rgb(37, 88, 64);
-}
-
-.queries-other {
-  background-color: #0077a6;
-}
-
 /*--- Used in the Query Log table ---*/
 .text-black {
   color: #000 !important;