/** * I think element-ui's default theme color is too light for long-term use. * So I modified the default color and you can modify it to your liking. **/ /* theme color */ $--color-primary: #0a7be0; $--color-success: #13ce66; $--color-warning: #ffba00; $--color-danger: #ff4949; // $--color-info: #1E1E1E; $--button-font-weight: 400; // $--color-text-regular: #1f2d3d; $--border-color-light: #dfe4ed; $--border-color-lighter: #e6ebf5; $--table-border: 1px solid #dfe6ec; /* icon font path, required */ $--font-path: "~element-ui/lib/theme-chalk/fonts"; @import "~element-ui/packages/theme-chalk/src/index"; @import "~fit2cloud-ui/src/styles/common/variables"; // sidebar $menuText:#1e212a; $menuActiveText:#0a7be0; $topMenuActiveText:#f4f4f5; $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 // $menuBg:#304156; $menuBg:#ffffff; // $menuHover:#263445; $menuHover: rgba(158, 158, 158, 0.2); $subMenuBg:#1f2d3d; // $subMenuHover:#001528; $subMenuHover:#0a7be0; $sideBarWidth: 210px; $topBarHeight: 56px; $contentHeight: calc(100vh - 56px); // the :export directive is the magic sauce for webpack // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass :export { theme: $--color-primary; menuText: $menuText; menuActiveText: $menuActiveText; topMenuActiveText: $topMenuActiveText; subMenuActiveText: $subMenuActiveText; menuBg: $menuBg; menuHover: $menuHover; subMenuBg: $subMenuBg; subMenuHover: $subMenuHover; sideBarWidth: $sideBarWidth; }