templateDemo/src/theme/index.scss

// we can add this to custom namespace, default is 'el'
//@forward "element-plus/theme-chalk/src/mixins/config.scss" with (
//  $namespace: "el"
//);

//base-theme
@use "./base";
//theme style such as dark-theme lighting
@use "./dark";
@use "./lighting";
@use "./china-red";
.el-button,
.el-input,
.el-textarea,
.el-textarea__inner,
.el-input__wrapper {
  border-radius: 4px;
}
.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px #ac014d inset;
}
.el-textarea__inner {
  &:focus {
    box-shadow: 0 0 0 1px #ac014d inset;
  }
}
.el-radio__input.is-checked .el-radio__inner,
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: #ac014d;
  border-color: #ac014d;
}
.el-radio__input.is-checked + .el-radio__label {
  color: #ac014d;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #303133;
}
.el-form-item__label {
  color: #303133;
  font-weight: 400;
}
.el-date-editor.el-input,
.el-date-editor.el-input__wrapper {
  width: 100%;
}
.manageTitle {
  position: relative;
  padding-left: 12px;
  margin-right: 48px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #303133;
  line-height: 30px;
  &::after {
    position: absolute;
    content: '';
    width: 4px;
    height: 20px;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: #ac014d;
  }
  .btn-back {
    margin-left: 24px;
    font-size: 16px;
    font-weight: normal;
    color: #2d67e3;
    cursor: pointer;
  }
}
.box {
  background: #ffffff;
  border-radius: 4px;
  padding: 30px 24px;
}
.t30 {
  margin-top: 30px;
}
.t24 {
  margin-top: 24px;
}
.el-button.is-plain {
  color: #ac014d;
  &:hover,
  &:focus {
    color: #fff;
    border-color: #ac014d;
    background-color: #ac014d;
  }
}
.el-button--primary {
  color: #fff;
  border-color: #ac014d;
  background-color: #ac014d;
  &:hover,
  &:focus {
    color: #fff;
    border-color: #ac014d;
    background-color: #ac014d;
  }
}
.el-button--primary.is-link {
  color: #ac014d;
  &:hover,
  &:focus {
    color: #ac014d;
  }
}
.el-button--danger {
  color: #fff;
  border-color: #ac014d;
  background-color: #ac014d;
  &:hover,
  &:focus {
    color: #fff;
    border-color: #ac014d;
    background-color: #ac014d;
  }
}
.el-form-item--small {
  margin-bottom: 20px;
}
.r10 {
  margin-right: 10px;
}
.t30 {
  margin-top: 30px;
}
.r24 {
  margin-right: 24px;
}