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;
|
||||
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"] textarea,
|
||||
[data-theme="sentient"] select {
|
||||
background: var(--input-bg);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--input-border);
|
||||
color: var(--text);
|
||||
border-radius: 8px;
|
||||
|
|
@ -884,6 +884,12 @@
|
|||
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"] textarea:focus,
|
||||
[data-theme="sentient"] select:focus {
|
||||
|
|
|
|||
|
|
@ -263,6 +263,22 @@ const ThemeManager = (() => {
|
|||
primary: primary,
|
||||
});
|
||||
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 }));
|
||||
}, 50);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue