manyi/static/components/custom/scss/_theme.scss

/***********************************************皮肤颜色： 默认未支付宝方案，完全不要老的皮肤方案了***************************************************************/
// 默认色调方案：由于theme-name 需要dom加载完才能生效，但css优先JS，所以需要一个默认的无需命名空间的皮肤
@each $key, $value in $alipay-color-colorMap {
  .c-#{$key} {
    color: $value !important;
  }
  .btn-#{$key} {
    background: $value !important;
    color: #fff !important;
  }
  .bg-#{$key} {
    background-color: $value !important;
  }
  .border-#{$key} {
    border: 1px solid $value !important;
  }
}

//带皮肤的色调方案
@each $theme-opt in $theme-colors {

  $theme-name: nth($theme-opt, 1);
  $theme-color: nth($theme-opt, 2);
  $colorMap: nth($theme-opt, 3);

  #{$theme-namespace}-#{$theme-name} {

    // 不同皮肤下的主色调
    @each $key, $value in $colorMap {
      .c-#{$key} {
        color: $value !important;
      }
      .btn-#{$key} {
        background: $value !important;
        color: #fff !important;
      }
      .bg-#{$key} {
        background-color: $value !important;
      }
      .border-#{$key} {
        border: 1px solid $value !important;
      }
    }

    //页面翻页插件样式
    .sl-ld-ball:first-of-type {
      background: rgba($theme-color, .8) !important;
    }

    .sl-ld-ball:nth-of-type(2) {
      background: rgba($theme-color, .3) !important;
    }

    // 公共弹窗 msgPopup 的按钮颜色
    .popup-button {
      color: $theme-color;
    }

    .custom-subt input[type='button'] {
      background-color: $theme-color;
    }

    /**登录、等界面按钮*/
    .subt input[type='button'] {
      background-color: $theme-color;
    }

    .subt a {
      color: $theme-color;
      border: 1px solid $theme-color;
    }

    .custom-btn-primary, .custom-btn-primary:active {
      background-color: $theme-color;
    }

    // 验证码
    .input-row.code button[type="button"] {
      background-color: $theme-color;
    }

    /**mui 日期选择*/
    .mui-poppicker-btn-ok,
    .mui-dtpicker-header button[data-id='btn-ok'] {
      color: $theme-color;
    }

    /**mui按钮*/
    .mui-btn-primary:enabled:active {
      border: 1px solid $theme-color;
      background-color: $theme-color;
    }

    .mui-btn-outlined.mui-btn-primary {
      color: $theme-color;
      border: 1px solid $theme-color;
    }

    .mui-checkbox input[type=checkbox]:checked:before,
    .mui-radio input[type=radio]:checked:before {
      color: $theme-color;
    }

    .mui-popup-button {
      color: $theme-color;
    }

    .mui-popup-button.mui-popup-button-bold {
      color: $theme-color;
    }

    .mui-bar-tab .mui-tab-item.mui-active {
      color: $theme-color;
    }

    .mui-switch.mui-active {
      border-color: rgba($theme-color, .7);
      background-color: rgba($theme-color, .7);
    }

  }
}