elementUi el-date-picker时间选择器暗色主题

小时类型选择框

月、年类型选择框

需要在el-date-picker组件内popper-class绑定对应的根class

   <el-date-picker
                v-model="searchForm.startValue"
                :type="currentType.timeType"    
                prefix-icon="el-icon-date"
                popper-class="timeDarkHourBox" //关键点 给弹出的时间框绑定根class
              ></el-date-picker>

以下是所有的css样式。 主题不要写scoped 根class timeDarkHourBox起名特殊点 所有子样式被包裹可以避免全局样式污染。

<style lang="scss">
$timeDarkbg: #29325c; //深色背景
$timeDarkzt: #3664fd; //主题色
$timeDartDisabled: #3d466e; //禁用的背景颜色
.timeDarkHourBox {
  background-color: $timeDarkbg;
  border-color: $timeDarkbg;
  color: #fff;
  .el-date-picker__header {
    .el-picker-panel__icon-btn {
      color: #fff;
    }
  }
  .el-date-picker__header-label {
    color: #fff;
    .el-picker-panel__icon-btn {
      color: #fff;
    }
  }
  .el-date-picker__header-label:hover {
    color: $timeDarkzt;
  }
  .el-date-picker__header--bordered {
    border-bottom: 1px solid #fff;
    .el-picker-panel__icon-btn {
      color: #fff;
    }
  }
  .el-picker-panel__content {
    .el-month-table,
    .el-year-table,
    .el-quarter-table {
      .today {
        .cell {
          color: $timeDarkzt !important;
        }
      }
      .current {
        .cell {
          background: $timeDarkzt;
          color: #fff !important;
        }
      }
      .disabled {
        .cell {
          color: #fff !important;
          background: $timeDartDisabled;
        }
      }
      .cell {
        color: #fff !important;
      }
    }
    .el-date-table {
      tr {
        th {
          color: #fff;
        }
      }
      .el-date-table__row {
        .disabled {
          div {
            color: #fff !important;
            background: $timeDartDisabled;
          }
        }
      }
    }
  }
  .el-date-picker__time-header {
    border-bottom: #fff;

    //  border-bottom: 1px solid #3664fd;
    .el-input__inner {
      background-color: $timeDarkbg;
      // border-color: #29325c;
      color: #fff;
    }
    .el-time-panel {
      background-color: $timeDarkbg;

      .el-time-spinner__item {
        color: #fff;
      }
      .active {
        color: $timeDarkzt;
      }
      .el-time-spinner__item:hover {
        background: none;
        color: $timeDarkzt;
      }
    }
  }

  .el-picker-panel__footer {
    background: $timeDarkbg;
    border-top: 1px solid #fff;
    .el-button {
      background: $timeDarkzt;
      border-color: $timeDarkzt;
      color: #fff;
    }
    .el-button:hover {
      background: #436efd;
      border-color: #436efd;
    }
  }
  .popper__arrow {
    border-bottom-color: $timeDarkbg !important;
  }
  .popper__arrow::after {
    border-bottom-color: $timeDarkbg !important;
  }
}
</style>