html.dark {
    .hc-using-query-page {
        .hc-query-input-box .hc-icon-mic {
            color: var(--hc-text-color);
            &:hover {
                background: #071c8c;
            }
        }
        .hc-gather-card-box {
            &.gui {
                background: #0f1344;
            }
            &.gui.is-mac {
                background: #0A1450;
            }
            .el-card.hc-new-card-box {
                background: transparent;
            }
            .el-card.hc-new-card-box .hc-card-header-box {
                border-bottom: 1px dashed var(--el-color-primary);
            }
            .el-card.hc-tab-card-box .tab-card-header-tabs .item {
                color: #838791;
                background: transparent;
                border: 1px dashed var(--el-color-primary);
            }
            .el-card.hc-tab-card-box .tab-card-header-tabs .item.cur {
                color: #fff;
                background: var(--el-color-primary);
                border-color: var(--el-color-primary);
                transition: .1s;
            }
            .el-card.hc-tab-card-box .tab-card-header-tabs .item.cur:after {
                background: var(--el-color-primary);
                height: 4px;
                bottom: -3px;
            }
            .hc-card-item-box {
                color: white;
                padding: 12px;
                background: transparent !important;
                border: 1px solid var(--el-color-primary);
                .header,.body.num-text {
                    color: var(--hc-text-color);
                }
            }
        }
        .hc-query-card-box .hc-query-filtering-collapse-box {
            box-shadow: none;
            .el-collapse {
                --el-collapse-content-bg-color: var(--hc-bg-color);
                .el-collapse-item__wrap {
                    border: 1px solid var(--el-color-primary);
                    box-shadow: 0 6px 20px 0 rgba(255, 255, 255, .23);
                }
            }
            .el-collapse-item__content {
                color: var(--hc-text-color);
                .hc-search-hot-key {
                    color: #c5c5c5;
                }
            }
        }
    }
    .hc-carry-spot-checks-target.el-overlay .el-drawer.hc-drawer-box {
        --el-transition-duration: 2s;
        .el-drawer__body .el-card {
            color: white;
            --el-card-border-radius: 5px;
            background-color: var(--hc-bg-color);
            border: 1px solid var(--el-color-primary);
            .el-card__header {
                border-color: var(--el-color-primary);
            }
        }
    }
    .hc-gui-info-drawer .hc-gui-info-data .hc-gui-data-container .info-item {
        color: white;
    }
    .hc-carry-spot-checks-data {
        border-color: var(--el-color-primary);
    }
    .hc-carry-spot-checks-data {
        .hc-csc-info-box, .hc-csc-data-box, .hc-csc-action-box {
            background: transparent;
        }
        .hc-csc-info-box .hc-info-text-item .content {
            color: white;
        }
    }
    .el-collapse.hc-node-tree-collapse .el-collapse-item {
        background-color: transparent;
        border-color: var(--el-color-primary);
        &.is-active .el-collapse-item__header.is-active {
            background-color: #0b1752;
        }
    }
    .hc-collapse-item-title {
        .el-checkbox {
            margin-right: 10px;
        }
        .title {
            color: white;
        }
    }
    .el-overlay-dialog .el-dialog.hc-modal-border .el-dialog__footer {
        border-color: var(--el-color-primary);
    }
}