From 84684c6687f17014038f36bb5bd91ddb64447e2d Mon Sep 17 00:00:00 2001
From: "Rodrigo Rodriguez (Pragmatismo)" <me@rodrigorodriguez.com>
Date: Fri, 20 Feb 2026 17:08:41 -0300
Subject: [PATCH] fix(ui): dynamic text contrast for chat balloons and
 suggestion chips

---
 ui/suite/chat/chat.css  | 12 ++++++------
 ui/suite/chat/chat.html | 17 +++++++++++++++++
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/ui/suite/chat/chat.css b/ui/suite/chat/chat.css
index 2321eb3..ad73bb0 100644
--- a/ui/suite/chat/chat.css
+++ b/ui/suite/chat/chat.css
@@ -246,14 +246,14 @@
 
 .user-message {
     background: var(--chat-color1, var(--accent, var(--primary, #3b82f6)));
-    color: #ffffff !important;
+    color: var(--chat-fg1, #ffffff) !important;
     border-bottom-right-radius: 4px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
 .bot-message {
     background: var(--chat-color2, var(--surface, var(--card, #2a2a2a)));
-    color: #ffffff !important;
+    color: var(--chat-fg2, var(--text)) !important;
     border-bottom-left-radius: 4px;
     border: 1px solid var(--chat-color1, rgba(0, 0, 0, 0.2));
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -270,7 +270,7 @@
 .bot-message h2,
 .bot-message h3,
 .bot-message h4 {
-    color: #ffffff !important;
+    color: var(--chat-fg2, var(--text)) !important;
 }
 
 /* Markdown content in bot messages */
@@ -557,7 +557,7 @@ footer {
     border-radius: 20px;
     border: 2px solid var(--chat-color2, #002147);
     background: var(--chat-color2, #002147);
-    color: #ffffff;
+    color: var(--chat-fg2, #ffffff);
     font-size: 12px;
     font-weight: 600;
     cursor: pointer;
@@ -587,7 +587,7 @@ footer {
 .suggestion-chip:hover,
 .suggestion-button:hover {
     background: var(--chat-color1, var(--suggestion-color, #4a9eff));
-    color: #ffffff;
+    color: var(--chat-fg1, #ffffff);
     border-color: var(--chat-color1, var(--suggestion-color, #6bb3ff));
     transform: translateY(-2px) scale(1.02);
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
@@ -629,7 +629,7 @@ form.input-container {
     border-radius: 20px;
     border: none;
     background: transparent;
-    color: #ffffff;
+    color: var(--text, inherit);
     font-size: 15px;
     outline: none;
     transition: all 0.2s;
diff --git a/ui/suite/chat/chat.html b/ui/suite/chat/chat.html
index de54398..1e1bd75 100644
--- a/ui/suite/chat/chat.html
+++ b/ui/suite/chat/chat.html
@@ -941,6 +941,18 @@
         }
 
         // Apply theme data from WebSocket events
+        function getContrastYIQ(hexcolor) {
+            if (!hexcolor || typeof hexcolor !== 'string') return '#ffffff';
+            hexcolor = hexcolor.replace("#", "");
+            if (hexcolor.length === 3) hexcolor = hexcolor.split('').map(function(c) { return c + c; }).join('');
+            if (hexcolor.length !== 6) return '#ffffff';
+            var r = parseInt(hexcolor.substr(0, 2), 16);
+            var g = parseInt(hexcolor.substr(2, 2), 16);
+            var b = parseInt(hexcolor.substr(4, 2), 16);
+            var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
+            return (yiq >= 128) ? '#000000' : '#ffffff';
+        }
+
         function applyThemeData(themeData) {
             console.log("Applying theme data:", themeData);
 
@@ -963,6 +975,9 @@
             document.documentElement.style.setProperty("--primary", color1);
             document.documentElement.style.setProperty("--accent", color1);
 
+            document.documentElement.style.setProperty("--chat-fg1", getContrastYIQ(color1));
+            document.documentElement.style.setProperty("--chat-fg2", getContrastYIQ(color2));
+
             console.log("Theme applied:", { color1: color1, color2: color2, logo: logo, title: title });
         }
 
@@ -1016,6 +1031,8 @@
                         document.documentElement.style.setProperty("--color2", color2);
                         document.documentElement.style.setProperty("--primary", color1);
                         document.documentElement.style.setProperty("--accent", color1);
+                        document.documentElement.style.setProperty("--chat-fg1", getContrastYIQ(color1));
+                        document.documentElement.style.setProperty("--chat-fg2", getContrastYIQ(color2));
                         console.log("Bot config colors applied:", { color1: color1, color2: color2 });
                     } else {
                         console.log("Bot config colors skipped - user selected custom theme:", localStorageTheme);