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;
    }
  }
}