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 二级菜单 - 深色主题 */ /* glass-pill 二级菜单 - 深色主题 */
.opt-btn-dropdown.type-glass-pill.theme-dark { .opt-btn-dropdown.type-glass-pill.theme-dark {
background: rgba(21, 34, 50, 0.98); background: var(--bim-bg-overlay);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(51, 65, 85, 0.5); border: 1px solid var(--bim-border-default);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); box-shadow: var(--bim-shadow-lg);
} }
.opt-btn-dropdown.type-glass-pill.theme-dark .opt-btn-dropdown-item { .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 { .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 { .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 { .opt-btn-dropdown.type-glass-pill.theme-dark .opt-btn-dropdown-item.active {
background: rgb(59, 130, 246); background: var(--bim-primary);
color: white; color: var(--bim-text-inverse);
} }
.opt-btn-dropdown.type-glass-pill.theme-dark .opt-btn-dropdown-item .opt-btn-icon { .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 { .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-primary', theme.primary);
style.setProperty('--bim-bg-overlay', theme.bgOverlay); style.setProperty('--bim-bg-overlay', theme.bgOverlay);
style.setProperty('--bim-bg-glass-blur', theme.bgGlassBlur); style.setProperty('--bim-border-default', theme.borderDefault);
style.setProperty('--bim-border-subtle', theme.borderSubtle);
style.setProperty('--bim-text-primary', theme.textPrimary); style.setProperty('--bim-text-primary', theme.textPrimary);
style.setProperty('--bim-text-inverse', theme.textInverse); 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-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(); const currentTheme = themeManager.getTheme();
dropdown.classList.add(`theme-${currentTheme.name}`); 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); document.body.appendChild(dropdown);
// 添加事件拦截 // 添加事件拦截