web/src/scss/_dark-mode.scss

/*
 * 样式 - 暗黑模式
 */

@media (prefers-color-scheme: dark) {
  #app {
    color: $dark-text-info;
  }
  body {
    background-color: $dark-bg;
  }

  // FORM
  .el-radio {
    &__label {
      color: $dark-text-main;
    }
    &__input {
      color: $dark-text-info;
      .el-radio__inner {
        border-color: $dark-border;
        background-color: $dark-btn-bg;
      }
    }

    &.is-checked {
      .el-radio__inner {
        background-color: $blue;
      }
      .el-radio__label {
        font-weight: bold;
      }
    }
  }

  .el-checkbox.is-bordered {
    border-color: $dark-border;
    color: $dark-text-main;
    background-color: $dark-btn-bg;
    .el-checkbox__inner {
      background-color: $dark-btn-bg-highlight;
      border-color: $dark-border-highlight;
    }
    &:hover {
      border-color: $dark-border-highlight;
      .el-checkbox__inner {
        background-color: $dark-btn-bg-highlight;
        border-color: $dark-border-highlight;
      }
      .el-checkbox__label {
        color: $dark-text-info;
      }
    }
    &.is-checked {
      background-color: $blue;
      .el-checkbox__inner {
        border-color: white;
      }
      .el-checkbox__label {
        color: white;
        font-weight: bold;
      }
      &:hover {
        border-color: $blue;
        .el-checkbox__inner {
          background-color: white;
        }
      }
    }
  }

  // BUTTON
  .el-button {
    background-color: $dark-btn-bg;
    border-color: $dark-border;
    color: $dark-text-main;

    &:active {
      transform: translateY(2px);
    }

    &--default {
      &.is-plain {
        background-color: $dark-btn-bg;
        &:hover {
          background-color: $blue;
          border-color: $blue;
          color: white;
        }
      }
      &.is-circle {
        background-color: $dark-blue;
        border-color: $dark-blue;
        &:hover {
          background-color: $blue;
          border-color: $blue;
          color: white;
        }
      }
    }

    &--success {
      &.is-plain {
        background-color: $dark-btn-bg;
        &:hover {
          background-color: $green;
          border-color: $green;
          color: white;
        }
      }
      &.is-circle {
        background-color: $dark-green;
        border-color: $dark-green;
        &:hover {
          background-color: $green;
          border-color: $green;
          color: white;
        }
      }
    }
    &--danger {
      &.is-plain {
        border-color: $dark-border;
        background-color: $dark-btn-bg;
        &:hover {
          background-color: $red;
          border-color: $red;
        }
      }
      &.is-circle {
        background-color: $dark-red;
        border-color: $dark-red;
        &:hover {
          background-color: $red;
          border-color: $red;
          color: white;
        }
      }
    }
  }

  // 文件拖放区
  .el-upload__tip {
    color: $dark-text-info;
  }
  .el-upload-dragger {
    background-color: $dark-uploader-bg;
    border-color: $dark-border;
    .el-upload__text {
      color: $dark-text-info;
    }
    &:hover {
      background: $dark-uploader-bg-highlight;
      border-color: $dark-border-highlight;
    }
  }

  // TABLE
  .el-table {
    background-color: $dark-bg-td;
    &:before {
      // 去除表格末尾的横线
      content: none;
    }
    &__header {
      th {
        border-bottom-color: $dark-border !important;
      }
    }
    th.el-table__cell {
      background-color: $dark-bg-th;
      color: $dark-text-info;
    }
    td {
      border-bottom-color: $dark-border !important;
    }
    tr {
      background-color: $dark-bg-td;
      color: $dark-text-main;
      &:hover {
        td {
          background-color: $dark-bg-th !important;
        }
      }
    }
  }

  // LINKS
  a {
    text-decoration: none;
    color: darken($dark-color-link, 15%);
    &:hover {
      color: $dark-color-link;
    }
  }

  // ALERT
  .el-notification {
    background-color: $dark-btn-bg-highlight;
    border-color: $dark-border;
    &__title {
      color: white;
    }
    &__content {
      color: $dark-text-info;
    }
  }

  // DIALOG
  .el-dialog {
    background-color: $dark-dialog-bg;
    .el-dialog__header {
      .el-dialog__title {
        color: $dark-text-main;
      }
    }
    .el-dialog__body {
      color: $dark-text-main;
      .el-input {
        .el-input__inner {
          color: $dark-text-main;
          background-color: $dark-btn-bg;
        }
        .el-input__suffix {
          .el-input__suffix-inner {
          }
        }
        .el-input__count {
          .el-input__count-inner {
            background-color: transparent;
          }
        }
      }
    }
    .item-desc {
      color: $dark-text-info;
    }
  }

  // 自定义样式
  // 首页弹窗提示信息的 更新信息 面板
  .update-info {
    border: 1px solid $dark-btn-bg !important;
    .update-title {
      color: $dark-text-main;
      background-color: $dark-btn-bg !important;
    }
    .update-content {
      color: $dark-text-info;
      padding: 10px;
    }
  }
}