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

fix: Remove body data-theme attribute to prevent CSS override
Some checks failed
BotUI CI / build (push) Has been cancelled
Details

Browse source 
This fixes the issue where theme changes required a page refresh to apply
to the chat client area. The body element's data-theme attribute was
applying base.css theme rules that overrode the inline styles set by the
theme manager.

Changes:
- Add data-theme="sentient" to html element in base.html
- Remove body's data-theme attribute when loading themes in theme-manager.js
- This prevents base.css [data-theme="*"] selectors from overriding inline styles

Now both header and body background update immediately when switching themes.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Rodrigo Rodriguez 2026-02-15 23:19:16 +00:00
parent 8bb8f9d96a
commit 9b417bf4f2
2 changed files with 78 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/suite/base.html
View file

@ -1,5 +1,5 @@
<!doctype html>
<html lang="en">
<html lang="en" data-theme="sentient">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

88
ui/suite/js/theme-manager.js
View file

@ -68,6 +68,8 @@ const ThemeManager = (() => {
if (!theme.file) {
currentThemeId = "default";
localStorage.setItem("gb-theme", "default");
// Re-enable sentient theme for default
document.documentElement.setAttribute("data-theme", "sentient");
updateDropdown();
return;
}
@ -81,24 +83,83 @@ const ThemeManager = (() => {
currentThemeId = id;
localStorage.setItem("gb-theme", id);
// Keep data-theme="sentient" on html so CSS selectors work
// The inline styles will override the colors
if (!document.documentElement.getAttribute("data-theme")) {
document.documentElement.setAttribute("data-theme", "sentient");
}
// Remove data-theme from body to prevent base.css theme rules from overriding
document.body.removeAttribute("data-theme");
// Small delay to ensure CSS variables are applied
setTimeout(() => {
// Get the theme's primary color from CSS variables
// Get the theme's colors from CSS variables
const rootStyle = getComputedStyle(document.documentElement);
const primaryColor = rootStyle.getPropertyValue("--primary")?.trim() || "#3b82f6";
const cardColor = rootStyle.getPropertyValue("--card")?.trim() || "#fafafa";
const primary = rootStyle.getPropertyValue("--primary")?.trim() || "#3b82f6";
const background = rootStyle.getPropertyValue("--background")?.trim() || "0 0% 100%";
const foreground = rootStyle.getPropertyValue("--foreground")?.trim() || "222 47% 11%";
const card = rootStyle.getPropertyValue("--card")?.trim() || "0 0% 98%";
const border = rootStyle.getPropertyValue("--border")?.trim() || "214 32% 91%";
// Convert HSL values to hex format for app compatibility
const hslToHex = (h, s, l) => {
l /= 100;
const a = s * Math.min(l, 1 - l) / 100;
const f = n => {
const k = (n + h / 30) % 12;
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
return Math.round(255 * color).toString(16).padStart(2, '0');
};
return `#${f(0)}${f(8)}${f(4)}`;
};
const parseHsl = (hslStr) => {
const match = hslStr.match(/(\d+)\s+(\d+)%\s+(\d+)%/);
if (match) {
return [parseInt(match[1]), parseInt(match[2]), parseInt(match[3])];
}
return null;
};
const bgHsl = parseHsl(background);
const fgHsl = parseHsl(foreground);
const cardHsl = parseHsl(card);
const borderHsl = parseHsl(border);
// Update the app's CSS variables with the theme colors
// These inline styles override the theme-sentient.css values
if (bgHsl) {
const bgHex = hslToHex(...bgHsl);
document.documentElement.style.setProperty("--bg", bgHex);
document.documentElement.style.setProperty("--primary-bg", `hsl(${background})`);
document.documentElement.style.setProperty("--header-bg", bgHex);
}
if (fgHsl) {
const textHex = hslToHex(...fgHsl);
document.documentElement.style.setProperty("--text", textHex);
document.documentElement.style.setProperty("--primary-fg", `hsl(${foreground})`);
}
if (cardHsl) {
const surfaceHex = hslToHex(...cardHsl);
document.documentElement.style.setProperty("--surface", surfaceHex);
document.documentElement.style.setProperty("--card-bg", surfaceHex);
}
if (borderHsl) {
const borderHex = hslToHex(...borderHsl);
document.documentElement.style.setProperty("--border", borderHex);
}
// Update ALL color-related CSS variables to match the theme
// This overrides any bot config colors
document.documentElement.style.setProperty("--chat-color1", primaryColor);
document.documentElement.style.setProperty("--chat-color2", cardColor);
document.documentElement.style.setProperty("--suggestion-color", primaryColor);
document.documentElement.style.setProperty("--suggestion-bg", cardColor);
document.documentElement.style.setProperty("--color1", primaryColor);
document.documentElement.style.setProperty("--color2", cardColor);
console.log("✓ Chat colors updated to match theme:", { primary: primaryColor, card: cardColor });
document.documentElement.style.setProperty("--chat-color1", `hsl(${primary})`);
document.documentElement.style.setProperty("--chat-color2", `hsl(${card})`);
document.documentElement.style.setProperty("--suggestion-color", `hsl(${primary})`);
document.documentElement.style.setProperty("--suggestion-bg", `hsl(${card})`);
document.documentElement.style.setProperty("--color1", `hsl(${primary})`);
document.documentElement.style.setProperty("--color2", `hsl(${card})`);
console.log("✓ Theme colors applied:", { bg: background, primary: primary });
updateDropdown();
subscribers.forEach((cb) => cb({ themeId: id, themeName: theme.name }));
}, 50);
@ -128,6 +189,11 @@ const ThemeManager = (() => {
}
function init() {
// Ensure data-theme is set on html element so CSS selectors work
if (!document.documentElement.getAttribute("data-theme")) {
document.documentElement.setAttribute("data-theme", "sentient");
}
// First, load saved bot theme from config.csv (if available)
loadSavedTheme();