ZY-Player/src/assets/theme/pink.scss

.theme-pink{
  color: var(--p-c); 
  background-color: var(--p-bgc);
  .el-button, input, select, .el-select{
    color: var(--p-c);
    background-color: var(--p-bgc);
    border-color: var(--p-bdc);
  }
  .el-select .el-input .el-select__caret{
    color: var(--p-icon)
  }
  .el-button--text{
    border: none;
  }
  .el-button--text:focus, .el-button--text:hover{
    color: var(--p-c-h);
  }
  .el-tabs__active-bar{
    background-color: var(--p-bdc);
  }
  .el-tabs__item:hover, .el-tabs__item.is-active{
    color: var(--p-c-h);
  }
  .el-tabs__item, .el-tabs__nav-wrap::after{
    color: var(--p-c);
    background-color: var(--p-bgc);
    border-color: var(--p-bdc);
  }
  .el-table--border::after, .el-table--proup::after, .el-table::before,
  .el-table, .el-table th, .el-table tr,
  .el-table--striped .el-table__body tr.el-table__row--striped td,
  .el-table--enable-row-hover .el-table__body tr:hover>td,
  .el-table td, .el-table th.is-leaf{
    color: var(--p-c);
    background-color: var(--p-bgc);
    border-color: var(--p-bdc);
  }
  .el-pagination, .el-pagination .el-pagination__total, .el-pagination .el-pagination__jump,
  .el-pagination .btn-next, .el-pagination .btn-prev, .el-pager li{
    color: var(--p-c);
    background-color: var(--p-bgc);
  }
  .el-pager li:hover, .el-pager li.active, .el-pager li.btn-quicknext, .el-pager li.btn-quickprev{
    color: var(--p-c-h);
  }
  .el-input__inner, .el-input__inner:hover,
  .el-input-group__append, .el-input-group__prepend{
    background-color: var(--p-bgc);
    border-color: var(--p-bdc);
  }
  .el-input.is-active .el-input__inner, .el-input__inner:focus{
    border-color: var(--p-bdc);
  }
  .el-input__inner{
    border-color: var(--p-bdc);
  }
  .el-select .el-input.is-focus .el-input__inner,
  .el-select .el-input__inner:focus,
  .el-select:hover .el-input__inner{
    border-color: var(--p-bdc);
  }
  input::-webkit-input-placeholder{
    color: var(--p-c);
  }
  .el-icon-search{
    color: var(--p-icon);
  }
  .el-select-dropdown{
    color: var(--p-c);
  }
  .el-drawer{
    background-color: var(--p-bgc) !important;
    overflow: auto;
    &::-webkit-scrollbar{
      width: 0px;
    }
  }
  .el-loading-mask{
    background-color: var(--p-bgc);
    opacity: 0.9;
  }
  .el-slider__bar{
    background-color: var(--p-c-h);
  }
  .el-slider__button{
    border-color: var(--p-c-h);
  }
  .Header, .Aside{
    i{
      color: var(--p-icon);
      &:hover{
        color: var(--p-icon-h);
        background-color: var(--p-bgc-h);
      }
    }
  }
  .Aside{
    i{
      &.active{
        color: var(--p-icon-h);
        background-color: var(--p-bgc-h);
        border-left: 4px solid var(--p-icon-h);
      }
    }
  }
  .Main{
    .film, .search, .star, .player{
      button:hover{
        color: var(--p-c-h);
        background: var(--p-bgc);
        border-color: var(--p-bdc);
      }
      .table-box{
        &::-webkit-scrollbar-track {
          box-shadow: inset 0 0 6px var(--p-bdc);
        }
        &::-webkit-scrollbar-thumb {
          background-color: var(--p-icon);
          outline: 1px solid var(--p-icon);
        }
      }
    }
    .player{
      .el-button--primary.is-plain{
        color: var(--p-c-h);
        background-color: var(--p-bgc-h);
        border-color: var(--p-bdc);
      }
    }
    .setting{
      .el-link, .card{
        color: var(--p-c);
        background-color: var(--p-bgc);
        border-color: var(--p-bdc);
      }
    }
  }
  .detail{
    color: var(--p-c);
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px var(--p-bdc);
    }
    &::-webkit-scrollbar-thumb {
      background-color: var(--p-icon);
      outline: 1px solid var(--p-icon);
    }
    .box, .info, .urls{
      border: 1px solid var(--p-bdc);
    }
    .vodInfo{
      li, span, a{
        color: var(--p-c);
      }
      label{
        color: #f90;
      }
    }
  }
}