cip-components/main/theme.less

/**
 @navBg 菜单背景色
 @headerBg 头部背景色
 @footBg 页脚背景色
 @fontColor 头部颜色
 @activeFontColor 菜单激活是文字颜色
 @menuItemActive 菜单激活时背景色
 @subMenuOpened 子菜单打开时背景色
 @menuFontColor 菜单文字颜色
 @mainBackground 主要的背景色
 */
.main-theme(@navBg,@headerBg, @footBg,@fontColor,@activeFontColor,@menuItemActive,@subMenuOpened,@menuFontColor,@mainBackground){
  .main-framework__aside{
    position: relative;
    z-index: 200;
    background: @navBg;
    box-shadow: 0 1px 4px rgba(0,21,41,.1);
    .el-menu{
      background: @navBg;
      &:not(.el-menu--collapse){
        .el-menu-item.is-active{
          border-left-color: @activeFontColor !important;
          background: @menuItemActive !important;
          color: @activeFontColor !important;
        }
      }
      .el-menu-item{
        color: @useMenuFontColor;
        border-left: 5px solid transparent;
        &:hover{
          color: @useMenuFontColor !important;
          background: @menuItemActive !important;
        }
      }
      .el-submenu {
      }
      .el-submenu__title{
        border-left: 5px solid transparent;
        color: @useMenuFontColor;
      }
      .el-menu-item.is-active{
        background: @menuItemActive;
        color: @activeFontColor;
      }
      .el-submenu{
        .el-submenu__title{
          background: @navBg;
        }
        &.is-active.el-submenu__title{
          background: @menuItemActive;
        }
        &.is-opened{
          .el-submenu__title{
            background: @subMenuOpened;
          }
          .el-menu{
            .el-menu-item{
              background: @subMenuOpened;
              &.is-active{
                background: @subMenuOpened;
              }
            }
          }
        }
      }
    }
  }

  .main-framework__name{
    background: @navBg;
    color: @fontColor;
  }

  .main-framework__header{
    .main-framework__name{ // 使用header的默认颜色和背景色
      background: @headerBg;
      color: @fontColor;
    }
    background: @headerBg;
    color: @fontColor;
    box-shadow: 0 1px 4px rgba(0,21,41,.1);
    position: relative;
    z-index: 200;
    .el-dropdown{
      color: inherit;
    }
    .el-breadcrumb__inner{
      color: inherit;
    }
  }
  .main-framework__main{
    background: @mainBackground;
  }
  .main-framework__footer{
    position: relative;
    z-index: 200;
    background: @footBg;
    color: @fontColor;
  }
  .main-framework__aside__switch{
    color: @useMenuFontColor;
    //box-shadow: 0 1px 4px rgba(0,21,41,.3);
  }
  @useMenuFontColor: if((iscolor(@menuFontColor)), @menuFontColor, @fontColor);
}

.main-theme--data-center{
  @themePrimary: #1e3851;
  .main-theme(@themePrimary,@themePrimary,@themePrimary,#fff,#fff,#104682,#253f58,'',@background);
}

.main-theme--light{
  @themePrimary: #fff;
  .main-theme(@themePrimary,@themePrimary,@themePrimary,#333,@primary,#e8f4ff,'','',@background);
}
// TODO: 黑暗模式待完善
.main-theme--dark{
  @themePrimary: #2f3542;
  .main-theme(@themePrimary,@themePrimary,@themePrimary,#fff,@primary,#444,'','',@background);
}