tailchat/web/src/styles/antd/dark.less

.dark {
  --antd-primary-border: #165996;
  --antd-primary-color: #177ddc;
  --antd-primary-color-hover: #095cb5;
  --antd-primary-dangerous-color: #a61d24;
  --antd-primary-dangerous-color-hover: #800f19;

  // 按钮
  .ant-btn {
    color: rgba(255, 255, 255, 0.65);
    border-color: #434343;
    background: transparent;

    &:hover,
    &:focus {
      color: var(--antd-primary-border);
      border-color: var(--antd-primary-border);
    }

    &.ant-btn-primary {
      color: #fff;
      border-color: var(--antd-primary-color);
      background: var(--antd-primary-color);

      &:hover {
        border-color: var(--antd-primary-color-hover);
        background: var(--antd-primary-color-hover);
      }

      &.ant-btn-dangerous {
        border-color: var(--antd-primary-dangerous-color);
        background: var(--antd-primary-dangerous-color);

        &:hover {
          border-color: var(--antd-primary-dangerous-color-hover);
          background: var(--antd-primary-dangerous-color-hover);
        }
      }

      &[disabled],
      &[disabled]:hover,
      &[disabled]:focus,
      &[disabled]:active {
        color: rgba(255, 255, 255, 0.3);
        border-color: #434343;
        background: #555;
      }
    }

    &.ant-btn-link {
      border-color: transparent;
    }
  }

  // 表单
  .ant-form-item-label > label {
    color: white;
  }

  // 表单错误
  .ant-form-item-has-error {
    .ant-input:not(.ant-input-disabled) {
      background-color: transparent;
      border-color: var(--antd-primary-dangerous-color);

      &:hover {
        background-color: transparent;
      }
    }
  }

  // 分割线
  .ant-divider {
    border-top-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
  }

  // 排版
  .ant-typography {
    color: rgba(255, 255, 255, 0.65);
  }

  // 输入框
  .ant-input {
    color: rgba(255, 255, 255, 0.65);
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.12);

    &:hover {
      border-color: #165996;
      border-right-width: 1px !important;
    }

    &:focus,
    &.ant-input-focused {
      border-color: #177ddc;
      border-right-width: 1px !important;
      box-shadow: 0 0 0 2px rgb(23 125 220 / 20%);
    }

    &.border-0 {
      border-width: 0 !important;
    }
  }
  // 输入框(带前后缀)
  .ant-input-affix-wrapper {
    color: rgba(255, 255, 255, 0.65);
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.12);
  }

  // 复选框
  .ant-checkbox-wrapper {
    color: white;
  }

  // 走马灯
  .ant-carousel {
    color: rgba(255, 255, 255, 0.65);
  }

  // 下拉菜单
  .ant-dropdown {
    color: rgba(255, 255, 255, 0.65);

    .ant-dropdown-menu {
      background-color: #1f1f1f;

      .ant-dropdown-menu-item,
      .ant-dropdown-menu-submenu-title {
        color: rgba(255, 255, 255, 0.65);

        &:hover {
          background-color: rgba(255, 255, 255, 0.08);
        }

        &.ant-dropdown-menu-item-danger {
          color: #a61d24;

          &:hover {
            color: white;
            background-color: #a61d24;
          }
        }
      }
    }
  }

  // 菜单
  .ant-menu {
    background-color: #222222;
    color: rgba(255, 255, 255, 0.85);
    border-right: 1px solid #333333;
  }

  // 树
  .ant-tree {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.85);

    .ant-tree-node-content-wrapper {
      &:hover {
        background-color: rgba(255, 255, 255, 0.08);
      }
    }
  }

  // badge
  .ant-badge {
    color: rgba(255, 255, 255, 0.65);

    .ant-badge-count {
      color: #fff;
      background: var(--antd-primary-dangerous-color);
      box-shadow: 0 0 0 1px #141414;
    }
  }

  // 空状态
  .ant-empty {
    &.ant-empty-normal {
      color: rgba(255, 255, 255, 0.65);
    }

    .ant-empty-img-default-ellipse {
      fill: #fff;
      fill-opacity: 0.08;
    }

    .ant-empty-img-default-path-1 {
      fill: #262626;
    }

    .ant-empty-img-default-path-2 {
      fill: url(#linearGradient-1);
    }

    .ant-empty-img-default-path-3 {
      fill: #595959;
    }

    .ant-empty-img-default-path-4 {
      fill: #434343;
    }

    .ant-empty-img-default-path-5 {
      fill: #595959;
    }

    .ant-empty-img-default-g {
      fill: #434343;
    }

    .ant-empty-img-simple-ellipse {
      fill: #fff;
      fill-opacity: 0.08;
    }

    .ant-empty-img-simple-g {
      stroke: #434343;
    }

    .ant-empty-img-simple-path {
      fill: #262626;
      stroke: #434343;
    }
  }

  // Modal
  .ant-modal {
    .ant-modal-content {
      background-color: #222222;

      .ant-modal-confirm-content {
        @apply text-typography-dark;
      }
    }
  }

  // Result
  .ant-result {
    .ant-result-title {
      color: #fff;
    }
  }

  // Table
  .ant-table {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.2);

    .ant-table-thead > tr > th {
      background: rgba(0, 0, 0, 0.2);
      color: rgba(255, 255, 255, 0.85);
      border-bottom: 1px solid #303030;
    }

    .ant-table-tbody {
      & > tr > td {
        border-bottom: 1px solid #303030;
      }

      & > tr.ant-table-placeholder:hover > td {
        background-color: rgba(255,255,255,0.2);
      }

      tr.ant-table-row:hover > td,
      tr > td.ant-table-cell-row-hover {
        background-color: rgba(255, 255, 255, 0.1);
      }
    }
  }

  .ant-select {
    .ant-select-selector {
      background-color: transparent;
      color: rgba(255, 255, 255, 0.85);
      border-color: rgba(255, 255, 255, 0.12);
    }

    .ant-select-arrow {
      color: rgba(0, 0, 0, 0.3)
    }
  }

  .ant-select-dropdown {
    background-color: #1f1f1f;

    .ant-select-item {
      color: rgba(255,255,255,.85);
      background-color: transparent;

      &:hover {
        background-color: rgba(255,255,255,.2);
      }
    }

    .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
      color: rgba(255,255,255,.85);
      font-weight: 600;
      background-color: #111b26;
    }
  }
}