Fix window transparency and theme dropdown background issues
- Fixed chat footer background to use var(--surface) CSS variable instead of hardcoded colors, ensuring proper theme adaptation - Fixed theme dropdown background by changing from var(--input-bg) to var(--surface) in theme-sentient.css - Added CSS override rules in desktop.css to ensure dropdown uses correct background - Added JavaScript fix in theme-manager.js to automatically apply correct dropdown background on theme load This resolves issues where theme dropdown and chat footer had black backgrounds in light themes.
This commit is contained in:
parent
48d773c0b3
commit
e2f1efef8c
4 changed files with 514 additions and 520 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -283,3 +283,10 @@ body.window-maximized .window-element {
|
||||||
background-color: var(--surface, #ffffff) !important;
|
background-color: var(--surface, #ffffff) !important;
|
||||||
opacity: 1 !important;
|
opacity: 1 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Fix theme dropdown background - use surface color to adapt to theme */
|
||||||
|
/* This overrides hardcoded black background from other CSS files */
|
||||||
|
#themeDropdown,
|
||||||
|
select.theme-dropdown {
|
||||||
|
background: var(--surface) !important;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -876,7 +876,7 @@
|
||||||
[data-theme="sentient"] input,
|
[data-theme="sentient"] input,
|
||||||
[data-theme="sentient"] textarea,
|
[data-theme="sentient"] textarea,
|
||||||
[data-theme="sentient"] select {
|
[data-theme="sentient"] select {
|
||||||
background: var(--input-bg);
|
background: var(--surface);
|
||||||
border: 1px solid var(--input-border);
|
border: 1px solid var(--input-border);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
|
@ -884,6 +884,12 @@
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Ensure theme dropdown uses surface color in all themes */
|
||||||
|
[data-theme="sentient"] select.theme-dropdown,
|
||||||
|
[data-theme="sentient"] #themeDropdown {
|
||||||
|
background: var(--surface) !important;
|
||||||
|
}
|
||||||
|
|
||||||
[data-theme="sentient"] input:focus,
|
[data-theme="sentient"] input:focus,
|
||||||
[data-theme="sentient"] textarea:focus,
|
[data-theme="sentient"] textarea:focus,
|
||||||
[data-theme="sentient"] select:focus {
|
[data-theme="sentient"] select:focus {
|
||||||
|
|
|
||||||
|
|
@ -263,6 +263,22 @@ const ThemeManager = (() => {
|
||||||
primary: primary,
|
primary: primary,
|
||||||
});
|
});
|
||||||
updateDropdown();
|
updateDropdown();
|
||||||
|
|
||||||
|
// Fix theme dropdown background to use surface color
|
||||||
|
const themeDropdown = document.getElementById("themeDropdown");
|
||||||
|
if (themeDropdown) {
|
||||||
|
const surfaceColor = getComputedStyle(document.documentElement)
|
||||||
|
.getPropertyValue("--surface")
|
||||||
|
.trim();
|
||||||
|
if (surfaceColor) {
|
||||||
|
themeDropdown.style.setProperty(
|
||||||
|
"background",
|
||||||
|
surfaceColor,
|
||||||
|
"important",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
subscribers.forEach((cb) => cb({ themeId: id, themeName: theme.name }));
|
subscribers.forEach((cb) => cb({ themeId: id, themeName: theme.name }));
|
||||||
}, 50);
|
}, 50);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue