tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ✨ 新增浅色模式下的侧边栏配色切换：深蓝色、白色

Browse Source
This commit is contained in:
lostelk
2025-02-19 12:45:29 +08:00
parent 5656760940
commit d6de05a4b7
13 changed files with 169 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/styles/variables.scss
View File

@@ -25,22 +25,31 @@
/** 全局SCSS变量 */
:root {
--menu-background: #fff;
--menu-text: #212121; // 菜单文字颜色 浅色模式下仅占位，实际颜色由 el-menu-item 组件决定
--menu-background: #fff; // 菜单背景色
--menu-text: #212121; // 菜单文字颜色 浅色主题-白色侧边栏配色下仅占位，实际颜色由 el-menu-item 组件决定
--menu-active-text: var(
--el-menu-active-color
); // 菜单激活文字颜色 浅色模式下仅占位，实际颜色由 el-menu-item 组件决定
--menu-hover: #e6f4ff; // 菜单悬停背景色 浅色模式下仅占位，实际颜色由 el-menu-item 组件决定
--sidebar-logo-background: #f5f5f5;
--sidebar-logo-text-color: #333;
); // 菜单激活文字颜色 浅色主题-白色侧边栏配色下仅占位，实际颜色由 el-menu-item 组件决定
--menu-hover: #e6f4ff; // 菜单悬停背景色 浅色主题-白色侧边栏配色下仅占位，实际颜色由 el-menu-item 组件决定
--sidebar-logo-background: #f5f5f5; // 侧边栏 Logo 背景色
--sidebar-logo-text-color: #333; // 侧边栏 Logo 文字颜色
// 修复表格 fixed 列被选中后由于透明色导致叠字的 bug
.el-table {
--el-table-current-row-bg-color: rgb(235 243 250);
}
}
/** 浅色主题-深蓝色侧边栏配色 */
html.light-darkBlue {
--menu-background: #304156; // 菜单背景色
--menu-text: #bfcbd9; // 菜单文字颜色
--menu-active-text: var(--el-menu-active-color); // 菜单激活文字颜色
--menu-hover: #263445; // 菜单悬停背景色
--sidebar-logo-background: #2d3748; // 侧边栏 Logo 背景色
--sidebar-logo-text-color: #fff; // 侧边栏 Logo 文字颜色
}
/** 暗黑主题 */
html.dark {
--menu-background: var(--el-bg-color-overlay);