cip-components/main/theme.less

@import './menu-theme-mixin.less';
/**
 @navBg 菜单背景色
 @headerBg 头部背景色
 @footBg 页脚背景色
 @fontColor 头部颜色
 @activeFontColor 菜单激活是文字颜色
 @menuItemActive 菜单激活时背景色
 @subMenuOpened 子菜单打开时背景色
 @menuFontColor 菜单文字颜色
 @mainBackground 主要的背景色
 */
.main-theme(@navBg,@headerBg, @footBg,@fontColor,@activeFontColor,@menuItemActive,@subMenuOpened,@menuFontColor,@mainBackground){
  @useMenuFontColor: if((iscolor(@menuFontColor)), @menuFontColor, @fontColor);
  // top 使用和header部分的配置
   // 菜单部分
  .main-framework--top__nav{
    .menu-theme--horizontal(@headerBg,  @fontColor, @headerBg, @fontColor);
  }
  // left 使用left部分的配置
   // 菜单部分 [注：在main-framework__aside将导致popover时样式服务正确应用，拿到外面将导致对menu-item部分的控制外溢影响--top__nav]
  .menu-theme--popup(@navBg, @useMenuFontColor, @menuItemActive, @activeFontColor, @subMenuOpened);
  .main-framework__aside{
    .menu-theme(@navBg, @useMenuFontColor, @menuItemActive, @activeFontColor, @subMenuOpened);
    position: relative;
    z-index: 200;
    background: @navBg;
    box-shadow: 0 1px 4px rgba(0,21,41,.1);
  }

  .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;
    .header-bar__logout{
      border-color: @fontColor;
    }
    .@{elNamespace}-dropdown{
      color: inherit;
    }
    .@{elNamespace}-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);
  }

}

.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, #f7f7f7,'',@background);
}
// TODO: 黑暗模式待完善
.main-theme--dark{
  @themePrimary: #2f3542;
  .main-theme(@themePrimary,@themePrimary,@themePrimary,#fff,#409eff,#444,#001328,'',@background);
}

.main-theme--standard{
  @themePrimary: var(--el-color-primary);
  .main-theme(
          #fff,
          @themePrimary,
          #fff,
          #fff,
          @themePrimary,
          var(--el-color-primary-light-9, #ecf5ff),
          #f7f7f7,
          #666,
          @background
  )
}