// 黑夜模式
[data-theme='theme-black'] {
  --base-color: #22272e; // #304156;
  --base-color-rgba: rgba(34,39,46, 0.3);
  --base-color-white: #ffffff;

  // root
  --base-bg-main: var(--base-color);
  --base-menu-background: var(--base-color);
  --base-logo-title-color: var(--base-color-white);
  --base-topBar-background: var(--base-color) !important;
  --base-topBar-color: var(--base-color-white);

  --base-color-bar: #dadada;
  --base-border-color: #424242;
  --base-border-black: #333333;
  --base-text-color-regular: #9b9da1;
  --base-text-color-placeholder: #7a7a7a;
  --base-color-hover: #3c3c3c;

  // el-ement ui 设置
  --el-fill-color-light: var(--base-color-rgba) !important;
  --el-fill-color-blank: var(--base-bg-main) !important;
  // --el-table-bg-color: var(--el-fill-color-blank);
  --el-color-white: var(--base-color) !important;
  --el-text-color-primary: var(--base-color-bar) !important;
  --el-border-color-base: var(--base-border-black) !important;
  --el-border-color-light: var(--base-border-black) !important;
  --el-text-color-regular: var(--base-text-color-regular) !important;
  --el-bg-color: var(--base-bg-main) !important;
  --el-color-success-lighter: var(--base-color) !important;
  --el-color-warning-lighter: var(--base-color) !important;
  --el-color-danger-lighter: var(--base-color) !important;
  --el-color-primary-lighter: var(--base-color) !important;
  --el-color-primary-light-9: var(--base-color-hover) !important;
  --el-text-color-disabled-base: var(--el-color-primary) !important;
  --el-border-color-lighter: var(--base-border-black) !important;
  // --el-text-color-placeholder: var(--base-text-color-placeholder) !important;
  // --el-disabled-bg-color: var(--base-color) !important;
  --el-fill-base: var(--base-color-white) !important;
  // el-date-picker bg
  --el-bg-color-overlay: var(--base-bg-main) !important;
  --el-disabled-text-color: var(--base-bg-main) !important;
  // drawer
  .drawer-item,
  .drawer-title {
    color: var(--base-color-white) !important;
  }

  .el-button--primary,
  .el-button--info,
  .el-button--danger,
  .el-button--success,
  .el-button--warning {
    --el-button-text-color: var(--base-color-white) !important;
    --el-button-hover-text-color: var(--base-color-white) !important;
    --el-button-disabled-text-color: var(--base-color-white) !important;
    &:hover {
      border-color: var(--el-button-hover-border-color, var(--el-button-hover-bg-color)) !important;
    }
  }

  // pagination
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    color: var(--base-color-white) !important;
  }
  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li {
    background-color: var(--main-bg-color);
  }

  // tabs
  .el-tabs--border-card {
    background-color: var(--el-color-white) !important;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    background: var(--base-color) !important;
  }

  // alert / notice-bar
  .home-card-item {
    border: 1px solid var(--base-border-color-light) !important;
  }
  .el-alert,
  .notice-bar {
    border: 1px solid var(--base-border-color) !important;
    background-color: var(--base-color) !important;
  }

  // colorPicker
  .el-color-picker__mask {
    background: unset !important;
  }
  .el-color-picker__trigger {
    border: 1px solid var(--base-border-color-light) !important;
  }

  // popper / dropdown
  .el-popper {
    border: 1px solid var(--base-border-color) !important;
    color: var(--el-text-color-primary) !important;
    .el-popper__arrow:before {
      background: var(--el-color-white) !important;
      border: 1px solid var(--base-border-color);
    }
    a {
      color: var(--el-text-color-primary) !important;
    }
  }
  .el-popper,
  .el-dropdown-menu {
    background: var(--el-color-white) !important;
  }
  .el-dropdown-menu__item:hover:not(.is-disabled) {
    background: var(--el-bg-color) !important;
  }
  .el-dropdown-menu__item.is-disabled {
    font-weight: 700 !important;
  }

  //tags menu 选择
  .tags-view-container .tags-view-wrapper .tags-view-item.active {
    background-color: var(--base-color) !important;
    // border-color: var(--base-color) !important;
  }

  // md 编辑器、图片加载错误、
  .md,
  .el-upload--picture-card,
  .el-image__error {
    background: none !important;
  }
  //el table loading mask
  .el-loading-mask {
    background-color: var(--base-color-rgba) !important;
  }
}
