GeneralBots/botui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): dynamic text contrast for chat balloons and suggestion chips

Browse source
This commit is contained in:
Rodrigo Rodriguez (Pragmatismo) 2026-02-20 17:08:41 -03:00
parent a7991dd3dc
commit 84684c6687
2 changed files with 23 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
ui/suite/chat/chat.css
View file

@ -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;

17
ui/suite/chat/chat.html
View file

@ -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);