From e58cb05025bb41215f4a6235ca09e47fae58e17a Mon Sep 17 00:00:00 2001
From: Albert Armea <github@albertarmea.com>
Date: Sun, 28 Dec 2025 08:51:14 -0500
Subject: [PATCH] Fix HUD colors

---
 crates/shepherd-hud/src/app.rs | 34 +++++++++++++++++++++++++---------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/crates/shepherd-hud/src/app.rs b/crates/shepherd-hud/src/app.rs
index fef5a46..0fafddf 100644
--- a/crates/shepherd-hud/src/app.rs
+++ b/crates/shepherd-hud/src/app.rs
@@ -358,8 +358,19 @@ fn build_hud_content(state: SharedState) -> gtk4::Box {
 
 fn load_css() {
     let css = r#"
+        :root {
+            --hud-bg: rgba(30, 30, 30, 0.95);
+            --text-primary: white;
+            --text-secondary: #d8dee9;
+            --color-info: #88c0d0;
+            --color-warning: #ebcb8b;
+            --color-critical: #ff6b6b;
+            --color-success: #a3be8c;
+            --hover-bg: rgba(255, 255, 255, 0.1);
+        }
+
         .hud-bar {
-            background-color: rgba(30, 30, 30, 0.95);
+            background-color: var(--hud-bg);
             border: none;
             margin: 0;
             padding: 6px 12px;
@@ -368,21 +379,21 @@ fn load_css() {
         .app-name {
             font-weight: bold;
             font-size: 14px;
-            color: white;
+            color: var(--text-primary);
         }
 
         .time-display {
             font-family: monospace;
             font-size: 14px;
-            color: #88c0d0;
+            color: var(--color-info);
         }
 
         .time-display.time-warning {
-            color: #ebcb8b;
+            color: var(--color-warning);
         }
 
         .time-display.time-critical {
-            color: #bf616a;
+            color: var(--color-critical);
             animation: blink 1s infinite;
         }
 
@@ -397,21 +408,26 @@ fn load_css() {
         }
 
         .warning-text {
-            color: #ebcb8b;
+            color: var(--color-warning);
             font-weight: bold;
         }
 
+        image {
+            color: var(--text-primary);
+        }
+
         .indicator-button,
         .control-button {
             min-width: 32px;
             min-height: 32px;
             padding: 4px;
             border-radius: 4px;
+            color: var(--text-primary);
         }
 
         .indicator-button:hover,
         .control-button:hover {
-            background-color: rgba(255, 255, 255, 0.1);
+            background-color: var(--hover-bg);
         }
 
         .close-button {
@@ -419,7 +435,7 @@ fn load_css() {
             min-height: 32px;
             padding: 4px;
             border-radius: 4px;
-            color: #bf616a;
+            color: var(--color-critical);
         }
 
         .close-button:hover {
@@ -428,7 +444,7 @@ fn load_css() {
 
         .battery-label {
             font-size: 12px;
-            color: #a3be8c;
+            color: var(--text-primary);
         }
     "#;