vue-template-admin customizes menu bar selection, activation, secondary menu and other color settings

1 Preface

vue-template-admin is a very easy-to-use front-end management framework, but its menu bar color and other settings are not clear or can be modified. This blog will fully accept how to customize and comprehensively modify the menu bar color style.

Two index.scss files and sidebar.scss files

The index.scss and sidebar.scss files jointly control the background color of this menu bar. The selected color is based on the selected background color.

index.css contains global public styles:

:root{
  --menuText_1:#bfcbd9;
  --menuActiveText_1:#409EFF;
  --subMenuActiveText_1:#f4f4f5;
  --menuBg_1:#304156;
  --menuHover_1:#263445;
  --subMenuBg_1:#356DEE;
  --subMenuHover_1:#001528;
  --boxshaw_1:#3f8ff4;
  --versionBg_1:#2C5DA6;

  --menuText_2:#fff;
  --menuActiveText_2:#3233F9;
  --subMenuActiveText_2:#fff;
  --menuBg_2:#3a9981;
  --menuHover_2:#6DFB63;
  --subMenuBg_2:#9FFB9F;
  --subMenuHover_2:#CBFBCA;
  --boxshaw_2:#9B99F9;
  --versionBg_2:#3a9981;
}
:root[theme="t1"]{
  --menuText:var(--menuText_1);//Default color of main menu text bar
  --menuActiveText:var(--menuActiveText_1);//The main menu bar text is activated color
  --subMenuActiveText:var(--subMenuActiveText_1);//The text color of the main menu bar when the submenu is activated

  --menuBg:var(--menuBg_1);//Main menu bar background color
  --menuHover:var(--menuHover_1);//Background color of the main menu bar when hovering
  --subMenuBg:var(--subMenuBg_1);//Submenu bar background color
  --subMenuHover:var(--subMenuHover_1);//Background color of submenu bar when hovering
  --menuItemActiveBgColor: var(--menuHover_1);//Background color of the selected menu bar
  --boxshaw:var(--boxshaw_1);
  --versionBg:var(--versionBg_1);

}

The sidebar.scss file uses the defined styles in index.scss:

I defined it as black, and the effect is as shown in the picture;

Three, overall index.scss file

#app {

  .main-container {
    min-height: 100%;
    transition: margin-left .28s;
    margin-left: $sideBarWidth;
    position: relative;
  }

  .sidebar-container {

    transition: width 0.28s;
    width: $sideBarWidth !important;
    // background-color: $menuBg;
    height: 100%;
    position: fixed;
    font-size: 0px;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;
    box-shadow: 0 0 3px var(--boxshaw);
    // reset element-ui css
    .horizontal-collapse-transition {
      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
    }

    .scrollbar-wrapper {
      overflow-x: hidden !important;
    }

    .el-scrollbar__bar.is-vertical {
      right: 0px;
    }

    .el-scrollbar {
      height: 100%;
    }

     & amp;.has-logo {
      .el-scrollbar {
        height: calc(100% - 50px);
      }
    }

    .is-horizontal {
      display: none;
    }

    a {
      display: inline-block;
      width: 100%;
      overflow: hidden;
    }

    .svg-icon {
      margin-right: 16px;
    }

    .sub-el-icon {
      margin-right: 12px;
      margin-left: -2px;
    }

    .el-menu {
      border: none;
      height: 100%;
      width: 100% !important;
    }

    // menu hover
    .submenu-title-noDropdown,
    .el-submenu__title {

       & amp;:hover {
        background-color: var(--menuHover) !important;

      }
    }
//When selected, the main menu color
    .is-active>.el-submenu__title {
      color: var(--subMenuActiveText) !important;//
      // background-color: var(--menuItemActiveBgColor) !important;
    }
//Select the background color of the menu bar
.el-menu .el-menu-item.is-active {

      background: var(--menuItemActiveBgColor)!important;
  }

     & .nest-menu .el-submenu>.el-submenu__title,
     & amp; .el-submenu .el-menu-item {
      min-width: $sideBarWidth !important;
      background-color: var(--subMenuBg) !important;
      // color: var(--menuActiveText)!important;
       & amp;:hover {
        background-color: var(--subMenuHover) !important;
      }

    }
  }

  .hideSidebar {
    .sidebar-container {
      width: 54px !important;
    }

    .main-container {
      margin-left: 54px;
    }

    .submenu-title-noDropdown {
      padding: 0 !important;
      position: relative;

      .el-tooltip {
        padding: 0 !important;

        .svg-icon {
          margin-left: 20px;
        }

        .sub-el-icon {
          margin-left: 19px;
        }
      }
    }

    .el-submenu {
      overflow: hidden;

       & amp;>.el-submenu__title {
        padding: 0 !important;

        .svg-icon {
          margin-left: 20px;
        }

        .sub-el-icon {
          margin-left: 19px;
        }

        .el-submenu__icon-arrow {
          display: none;
        }
      }
    }

    .el-menu--collapse {
      .el-submenu {
         & amp;>.el-submenu__title {
           &>span {
            height: 0;
            width: 0;
            overflow: hidden;
            visibility: hidden;
            display: inline-block;
          }
        }
      }
    }
  }

  .el-menu--collapse .el-menu .el-submenu {
    min-width: $sideBarWidth !important;
  }

  // mobile responsive
  .mobile {
    .main-container {
      margin-left: 0px;
    }

    .sidebar-container {
      transition: transform .28s;
      width: $sideBarWidth !important;
    }

     & amp;.hideSidebar {
      .sidebar-container {
        pointer-events: none;
        transition-duration: 0.3s;
        transform: translate3d(-$sideBarWidth, 0, 0);
      }
    }
  }

  .withoutAnimation {

    .main-container,
    .sidebar-container {
      transition: none;
    }
  }
}

// when menu collapsed
.el-menu--vertical {
   & amp;>.el-menu {
    .svg-icon {
      margin-right: 16px;
    }
    .sub-el-icon {
      margin-right: 12px;
      margin-left: -2px;
    }
  }

  .nest-menu .el-submenu>.el-submenu__title,
  .el-menu-item {
     & amp;:hover {
      // you can use $subMenuHover
      background-color: var(--menuHover) !important;
    }
  }

  // the scroll bar appears when the subMenu is too long
  >.el-menu--popup {
    max-height: 100vh;
    overflow-y: auto;

     & amp;::-webkit-scrollbar-track-piece {
      background: #d3dce6;
    }

     & amp;::-webkit-scrollbar {
      width: 6px;
    }

     & amp;::-webkit-scrollbar-thumb {
      background: #99a9bf;
      border-radius: 20px;
    }
  }
}

Using var(–xxx) in the sidebar.scss file means using the custom style color in index.scss. You can adjust the color as needed.

The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Vue entry skill treeHomepageOverview 39361 people are learning the system