index.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. :root {
  2. // 主题色
  3. --system-primary-color: #409eff; // 可做背景色和文本色,用做背景色时,需要和--system-primary-text-color配合使用,避免文件颜色和主题色冲突
  4. --system-primary-text-color: #fff; // 主题色作为背景色时使用
  5. // logo颜色相关
  6. --system-logo-color: #f1f1f1;
  7. --system-logo-background: #263445;
  8. // 菜单颜色相关
  9. --system-menu-text-color: #bfcbd9;
  10. --system-menu-background: #28415a;
  11. --system-menu-children-background: #1f2d3d;
  12. --system-menu-submenu-active-color: #fff;
  13. --system-menu-hover-background: #203448;
  14. // header区域
  15. --system-header-background: #fff;
  16. --system-header-text-color: #bbb;
  17. --system-header-breadcrumb-text-color: #97a8be;
  18. --system-header-item-hover-color: #000;
  19. --system-header-border-color: #d8dce5;
  20. --system-header-tab-background: #fff;
  21. // contaier区域,父框架
  22. --system-container-background: #f8f8f8;
  23. --system-container-main-background: #fff;
  24. // 页面区域, 这一块是你在自己写的文件中使用主题,核心需要关注的地方
  25. --system-page-background: #fff; // 主背景
  26. --system-page-color: #303133; // 主要的文本颜色
  27. --system-page-tip-color: rgba(0, 0, 0, 0.45); // 协助展示的文本颜色
  28. --system-page-border-color: #000; // 通用的边框配置色,便于主题扩展
  29. // element主题色修改
  30. --el-color-primary: var(--system-primary-color);
  31. }
  32. // 进度条颜色修改为主题色
  33. body #nprogress .bar {
  34. background-color: var(--system-primary-color);
  35. }
  36. body #nprogress .peg {
  37. box-shadow: 0 0 10px var(--system-primary-color), 0 0 5px var(--system-primary-color);
  38. }
  39. body #nprogress .spinner-icon {
  40. border-top-color: var(--system-primary-color);
  41. border-left-color: var(--system-primary-color);
  42. }
  43. @import './modules/dark.scss';