dark.scss 1.0 KB

12345678910111213141516171819202122232425262728293031323334
  1. @import 'element-plus/theme-chalk/dark/css-vars.css';
  2. html.dark {
  3. background-color: #161d31;
  4. // 侧边栏背景色
  5. --sider-bg-color: #283046;
  6. // header logo 文字颜色
  7. --header-logo-text-color: #ffffff;
  8. // 侧边栏菜单的文字颜色
  9. --sider-menu-text-color: #ffffff;
  10. // sub menu bg color
  11. --sider-sub-menu-bg-color: #161d31;
  12. // 侧边栏子菜单 hover 的颜色
  13. --sider-sub-menu-hover-bg-color: #343d55;
  14. // 激活文字颜色
  15. --sider-ment-active-text-color: var(--el-color-primary);
  16. // 激活时背景色
  17. --side-active-menu-bg-color: rgba(255, 255, 255, 0.08);
  18. /* 自定义深色背景颜色 */
  19. --el-bg-color: var(--sider-sub-menu-hover-bg-color);
  20. --el-fill-color-blank: var(--sider-bg-color);
  21. --el-bg-color-overlay: var(--sider-bg-color);
  22. --header-bg-color: var(--sider-bg-color);
  23. // border color
  24. --el-border-color-lighter: #3b4253;
  25. --el-fill-color-light: #161d31;
  26. // side sub menu margin
  27. --sider-sub-menu-bg-margin: 0px 0.05rem;
  28. --el-mask-color: transparent;
  29. }