fix(theme): 优化深色模式二级菜单悬浮颜色
- 二级菜单使用主题变量替代硬编码颜色 - hover 背景使用 floatingBtnBg 增强与背景区分度 - 同步 floating 变量到 dropdown 元素
This commit is contained in:
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
@@ -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);
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
// 添加事件拦截
|
||||
|
||||
Reference in New Issue
Block a user