fix(theme): 优化深色模式二级菜单悬浮颜色

- 二级菜单使用主题变量替代硬编码颜色
- hover 背景使用 floatingBtnBg 增强与背景区分度
- 同步 floating 变量到 dropdown 元素
This commit is contained in:
yuding
2026-01-21 16:50:00 +08:00
parent 99aece7b89
commit 70523e54e5
5 changed files with 49 additions and 48 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -474,34 +474,34 @@
/* glass-pill 二级菜单 - 深色主题 */
.opt-btn-dropdown.type-glass-pill.theme-dark {
background: rgba(21, 34, 50, 0.98);
background: var(--bim-bg-overlay);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(51, 65, 85, 0.5);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
border: 1px solid var(--bim-border-default);
box-shadow: var(--bim-shadow-lg);
}
.opt-btn-dropdown.type-glass-pill.theme-dark .opt-btn-dropdown-item {
color: #ffffff;
color: var(--bim-text-primary);
}
.opt-btn-dropdown.type-glass-pill.theme-dark .opt-btn-dropdown-item:hover {
background: #1f2d3e;
background: var(--bim-floating-btn-bg);
}
.opt-btn-dropdown.type-glass-pill.theme-dark .opt-btn-dropdown-item:active {
background: #2a3f54;
background: var(--bim-floating-btn-bg-hover);
}
.opt-btn-dropdown.type-glass-pill.theme-dark .opt-btn-dropdown-item.active {
background: rgb(59, 130, 246);
color: white;
background: var(--bim-primary);
color: var(--bim-text-inverse);
}
.opt-btn-dropdown.type-glass-pill.theme-dark .opt-btn-dropdown-item .opt-btn-icon {
color: #ffffff;
color: var(--bim-floating-icon-color);
}
.opt-btn-dropdown.type-glass-pill.theme-dark .opt-btn-dropdown-item .opt-btn-dropdown-label {
color: #ffffff;
color: var(--bim-text-primary);
}

View File

@@ -309,15 +309,13 @@ export class BimButtonGroup implements IBimComponent {
style.setProperty('--bim-primary', theme.primary);
style.setProperty('--bim-bg-overlay', theme.bgOverlay);
style.setProperty('--bim-bg-glass-blur', theme.bgGlassBlur);
style.setProperty('--bim-border-subtle', theme.borderSubtle);
style.setProperty('--bim-border-default', theme.borderDefault);
style.setProperty('--bim-text-primary', theme.textPrimary);
style.setProperty('--bim-text-inverse', theme.textInverse);
style.setProperty('--bim-icon-default', theme.iconDefault);
style.setProperty('--bim-icon-inverse', theme.iconInverse);
style.setProperty('--bim-component-bg-hover', theme.componentBgHover);
style.setProperty('--bim-component-bg-active', theme.componentBgActive);
style.setProperty('--bim-shadow-lg', theme.shadowLg);
style.setProperty('--bim-floating-btn-bg', theme.floatingBtnBg);
style.setProperty('--bim-floating-btn-bg-hover', theme.floatingBtnBgHover);
style.setProperty('--bim-floating-icon-color', theme.floatingIconColor);
});
}
@@ -633,7 +631,16 @@ export class BimButtonGroup implements IBimComponent {
const currentTheme = themeManager.getTheme();
dropdown.classList.add(`theme-${currentTheme.name}`);
// 先添加到 DOM 以便计算尺寸
dropdownStyle.setProperty('--bim-primary', currentTheme.primary);
dropdownStyle.setProperty('--bim-bg-overlay', currentTheme.bgOverlay);
dropdownStyle.setProperty('--bim-border-default', currentTheme.borderDefault);
dropdownStyle.setProperty('--bim-text-primary', currentTheme.textPrimary);
dropdownStyle.setProperty('--bim-text-inverse', currentTheme.textInverse);
dropdownStyle.setProperty('--bim-shadow-lg', currentTheme.shadowLg);
dropdownStyle.setProperty('--bim-floating-btn-bg', currentTheme.floatingBtnBg);
dropdownStyle.setProperty('--bim-floating-btn-bg-hover', currentTheme.floatingBtnBgHover);
dropdownStyle.setProperty('--bim-floating-icon-color', currentTheme.floatingIconColor);
document.body.appendChild(dropdown);
// 添加事件拦截