Add panel-specific color variables

src/themes/custom-template.css

@@ -42,6 +42,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 @define-color blue_1 @blue_1;
 @define-color blue_2 @blue_2;
 @define-color green_1 @green_1;

src/themes/dark/Bluetiful Dusk 🌃.css

@@ -42,6 +42,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 @define-color blue_1 #3584e4;
 @define-color blue_2 #99c1f1;
 @define-color green_1 #33d17a;

src/themes/dark/Breeze Dark 🎐.css

@@ -42,6 +42,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 @define-color blue_1 #99c1f1;
 @define-color blue_2 #62a0ea;
 @define-color green_1 #8ff0a4;

src/themes/dark/Catppuccin Frappe 🪴.css

@@ -32,6 +32,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Catppuccin Frappé accent colors */
 @define-color blue_1 #8caaee; /* blue */
 @define-color blue_2 #81c8be; /* teal */

src/themes/dark/Catppuccin Macchiato 🌺.css

@@ -34,6 +34,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Catppuccin accent colors */
 @define-color blue_1 #8aadf4; /* blue */
 @define-color blue_2 #8bd5ca; /* teal */

src/themes/dark/Catppuccin Mocha 🌿.css

@@ -32,6 +32,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Catppuccin accent colors */
 @define-color blue_1 #89b4fa; /* blue */
 @define-color blue_2 #74c7ec; /* sapphire */

src/themes/dark/Dracula 🧛🏻‍♂️.css

@@ -32,6 +32,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Dracula accent colors */
 @define-color blue_1 #6272a4; /* comment */
 @define-color blue_2 #8be9fd; /* cyan */

src/themes/dark/Everforest 🌲.css

@@ -32,6 +32,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Everforest Dark accent colors */
 @define-color blue_1 #7fbbb3; /* blue */
 @define-color blue_2 #83c092; /* green */

src/themes/dark/Gruvbox Medium 🌴.css

@@ -32,6 +32,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Gruvbox Dark Medium accent colors */
 @define-color blue_1 #83a598; /* blue */
 @define-color blue_2 #8ec07c; /* aqua */

src/themes/dark/Gruvbox Soft 🌱.css

@@ -32,6 +32,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Gruvbox Dark Soft accent colors */
 @define-color blue_1 #83a598; /* blue */
 @define-color blue_2 #8ec07c; /* aqua */

src/themes/dark/Kanagawa 🌊.css

@@ -28,6 +28,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Accents */
 @define-color blue_1 #7e9cd8;
 @define-color blue_2 #658594;

src/themes/dark/Material Deepocean 🐚.css

@@ -32,6 +32,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Material DeepOcean accent colors */
 @define-color blue_1 #82aaff;
 @define-color blue_2 #89ddff;

src/themes/dark/Material Palenight 🌙.css

@@ -32,6 +32,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Material Palenight accent colors */
 @define-color blue_1 #82aaff;
 @define-color blue_2 #89ddff;

src/themes/dark/Nightfox 🦊.css

@@ -32,6 +32,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Nightfox accent colors */
 @define-color blue_1 #6a96d0; /* blue */
 @define-color blue_2 #5eb9ff; /* light blue */

src/themes/dark/Nord 🏔️.css

@@ -32,6 +32,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Nord accent colors */
 @define-color blue_1 #5e81ac; /* nord9 */
 @define-color blue_2 #81a1c1; /* nord10 */

src/themes/dark/One Dark ⚛️.css

@@ -33,6 +33,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* One Dark Cool accent colors */
 @define-color blue_1 #61AFEF;  /* Blue */
 @define-color blue_2 #528BCC;

src/themes/dark/Otto 🐙.css

@@ -32,6 +32,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Otto accent colors */
 @define-color blue_1 #3daee9;
 @define-color blue_2 #33607f;

src/themes/dark/Pretty Purple 🌆.css

@@ -30,6 +30,12 @@
 @define-color card_bg_color #494267;
 @define-color card_fg_color #dcdbe2;
 
+/* Panel */
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Destructive */
 @define-color destructive_color #ff7b63;
 @define-color destructive_bg_color #c01c28;

src/themes/dark/Rosé Pine Moon 🌒.css

@@ -32,6 +32,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Rosé Pine Moon accent colors */
 @define-color blue_1 #9ccfd8; /* foam */
 @define-color blue_2 #c4a7e7; /* iris */

src/themes/dark/Rosé Pine 🌹.css

@@ -32,6 +32,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Rosé Pine accent colors */
 @define-color blue_1 #9ccfd8;
 @define-color blue_2 #c4a7e7;

src/themes/dark/Solarized ☀️.css

@@ -32,6 +32,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Solarized accent colors */
 @define-color blue_1 #268bd2; /* blue */
 @define-color blue_2 #2aa198; /* cyan */

src/themes/dark/Synthwave '84 🌅.css

@@ -33,6 +33,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Synthwave '84 Accent Colors */
 @define-color blue_1 #2c75e7;  /* Electric blue */
 @define-color blue_2 #5ed7ff;  /* Bright cyan */

src/themes/dark/Tokyonight Storm 🌪️.css

@@ -34,6 +34,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Tokyo Night accent colors */
 @define-color blue_1 #7aa2f7;
 @define-color blue_2 #7dcfff;

src/themes/dark/Tokyonight 🗼.css

@@ -32,6 +32,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Tokyo Night accent colors (Dark variant) */
 @define-color blue_1 #7aa2f7;
 @define-color blue_2 #7dcfff;

src/themes/default-dark.css

@@ -27,6 +27,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 @define-color blue_1 #3584e4;
 @define-color green_1 #33d17a;
 @define-color yellow_1 #f6d32d;

src/themes/default-light.css

@@ -27,6 +27,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 @define-color blue_1 #3584e4;
 @define-color green_1 #33d17a;
 @define-color yellow_1 #f6d32d;

src/themes/gnome-shell-template.css

@@ -3,29 +3,34 @@
 /*border_color: accent color if window border is enabled*/
 /*card_bg_color: background color for buttons or items that need to contrast the background*/
 /*headerbar_bg_color: dark color for high contrast*/
+/*panel_bg_color: panel background color*/
+/*panel_fg_color: panel text color*/
+/*panel_button_bg_color: panel button background color*/
+/*panel_hover_bg_color: panel button hover background color*/
 
 /* Top Bar */
 #panel {
-  background-color: @window_bg_color;
-  color: @window_fg_color;
+  background-color: @panel_bg_color;
+  color: @panel_fg_color;
   font-feature-settings: "tnum";
   height: 45px;
 }
 
 #panel .panel-button {
-  color: @window_fg_color;
+  color: @panel_fg_color;
+  background-color: @panel_button_bg_color;
 }
 
 #panel .panel-button:hover {
-  background-color: @card_bg_color;
+  background-color: @panel_hover_bg_color;
 }
 
 #panel .panel-button:hover.clock-display .clock {
-  background-color: @card_bg_color;
+  background-color: @panel_hover_bg_color;
 }
 
 #panel .panel-button #panelActivities .workspace-dot {
-  background-color: @window_fg_color;
+  background-color: @panel_fg_color;
 }
 
 .window-close {

src/themes/light/Alucard 🧛🏻‍♂️.css

@@ -32,6 +32,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Alucard accent colors (mostly same as Dracula dark) */
 @define-color blue_1 #6272a4;
 @define-color blue_2 #0274b3;

src/themes/light/Catppuccin Latte 🌻.css

@@ -32,6 +32,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Catppuccin Latte accent colors */
 @define-color blue_1 #1e66f5; /* blue */
 @define-color blue_2 #179299; /* teal */

src/themes/light/Dawnfox 🦊.css

@@ -32,6 +32,11 @@
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_border_color @sidebar_border_color;
 
+@define-color panel_bg_color @window_bg_color;
+@define-color panel_fg_color @window_fg_color;
+@define-color panel_button_bg_color transparent;
+@define-color panel_hover_bg_color @card_bg_color;
+
 /* Dawnfox accent colors */
 @define-color blue_1 #286983; /* blue */
 @define-color blue_2 #569fba; /* cyan */