bim_xg/bim_engine
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 二级菜单使用主题变量替代硬编码颜色
- 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
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/button-group/index.css
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);
}

21
src/components/button-group/index.ts
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);
// 添加事件拦截