for_client/src/styles/app/theme.scss

//通用样式
html {
    --hc-body-bg-color: #F5F5F5;
    --hc-bg-color: #ffffff;
    --hc-text-color: #333333;
    --hc-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15), -4px -4px 8px 0 #ffffff;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}

//深色主题设置
html.dark {
    --hc-body-bg-color: #050c17;
    --hc-bg-color: #050c17;
    --hc-text-color: #7780A1;
    --el-bg-color-overlay: #050c17;
    --hc-border-color: rgba(119, 128, 161, .2);
    --hc-label-color: #5A6382;
    --hc-shadow: 4px 4px 8px 0 rgba(0,0,0,0.15), -4px -4px 8px 0 #3d3d3d;
    html, body, #app {
        background: #000000;
        color: hsla(0,0%,100%,0.8);
    }
    .hc-layout-box .hc-layout-left-box {
        background: #181818 !important;
        color: hsla(0,0%,100%,0.8) !important;
    }
    .hc-layout-box .hc-layout-left-box .hc-project-box,
    .hc-layout-box .hc-layout-left-box .hc-tree-foot-tip-box {
        border-color: hsla(0,0%,100%,0.2);
    }
    .hc-layout-box .hc-layout-left-box .hc-project-box .hc-project-icon-box {
        color: white;
    }
    .hc-layout-box .hc-layout-left-box .hc-project-box .project-name-box .project-alias {
        color: white;
    }
    .hc-layout-box .hc-layout-left-box .hc-tree-foot-tip-box .dot-view.black:before,
    .hc-tree-mp-tip-box .dot-view.black:before{
        border: 1px solid #3e3d3d;
    }
    .data-custom-tree-node .menu-icon1 {
        background: hsla(0,0%,100%,0.46);
    }
    .data-custom-tree-node{
       
        &:hover {
            background-color: #000000;
        }
    }
    .data-custom-tree-node .menu-icon1 .cu-tree-node-popover-menu-icon {
        color: black;
    }
    //右键菜单
    .hc-context-menu-box {
        background-color: #4A4A4A;
    }
    .hc-context-menu-box .hc-context-menu-item {
        color: #E3E3E3;
        &:hover {
            background-color: #616161;
        }
    }
    //新卡片
    .el-card.hc-new-card-box {
        background: #181818;
        --el-card-bg-color: #181818;
        --el-text-color-primary: hsla(0, 0%, 100%, 0.8);
    }
    .el-card.hc-tab-card-box .hc-card-header-box {
        border-color: hsla(0, 0%, 100%, 0.2);
    }
    .el-card.hc-tab-card-box .tab-card-header-tabs .item {
        border-color: hsla(0, 0%, 100%, 0.2);
    }
    .el-card.hc-tab-card-box .tab-card-header-tabs {
        .item + .item {
            border-left: 0;
        }
    }
    .el-card.hc-tab-card-box .tab-card-header-tabs .item.cur {
        background: #181818;
        border-color: hsla(0, 0%, 100%, 0.2);
        color: hsla(0, 0%, 100%, 0.8);
    }
    .el-card.hc-tab-card-box .tab-card-header-tabs .item.cur:after {
        background: #181818;
    }
    //切换线
    .hc-expansion-contraction-tree:hover {
        color: #8c9099;
        background: #181818;
    }
    //表单
    .data-fill-list-box .el-collapse .el-collapse-item {
        background-color: #282828;
        border-color: hsla(0,0%,100%,0.45);
    }
    .data-fill-list-box .hc-collapse-item-header .item-title {
        color: rgba(255, 255, 255, 0.9);
    }
    .data-fill-list-box .hc-collapse-item-header .real-fill-rate::after {
        background: hsla(0, 0%, 100%, 0.2);
    }
    .data-fill-list-box .hc-collapse-item-header .real-fill-rate .tag {
        background: #181818;
    }
    .data-fill-list-box .el-collapse .el-collapse-item.is-active .el-collapse-item__header.is-active {
        background-color: transparent;
    }
    .data-fill-list-box .el-collapse .el-collapse-item__wrap .el-collapse-item__content {
        color: hsla(0, 0%, 100%, 0.8);
    }
    .data-fill-list-box .data-fill-list-item-content .data-fill-table-form-box {
        border-color: #131313;
    }
    //表单颜色
    .hc-table-form-data-item .hc-excel-table-form, .hc-excel-table-form-view {
        .el-input, .el-date-editor {
            --el-input-text-color: #606266;
            --el-input-hover-border: #c0c4cc;
            --el-input-border-color: #dcdfe6;
            --el-input-bg-color: #ffffff;
            --el-input-icon-color: #a8abb2;
            --el-input-placeholder-color: #a8abb2;
            --el-input-hover-border-color: #c0c4cc;
            --el-input-clear-hover-color: #909399;
        }
        .el-date-editor .el-range-input {
            color: #4c4e50;
        }
        .el-radio, .el-checkbox {
            color: #606266;
        }
    }
    .el-overlay {
        background-color: rgb(255 255 255/0.05);
        backdrop-filter: blur(4px);
    }
    .ui-drag-modal-box .ui-drag-modal-dialog {
        background: #2f2f2f;
        border: 1px solid hsla(0,0%,100%,0.2);
        box-shadow: 0 0 24px rgba(81,87,103,.16);
    }
    .el-overlay-dialog .el-dialog.hc-new-dialog {
        background: #2f2f2f;
        border: 1px solid hsla(0,0%,100%,0.2);
        box-shadow: 0 0 24px rgba(81,87,103,.16);
    }
    .el-overlay-dialog .el-dialog.hc-modal-border .el-dialog__header,
    .el-overlay-dialog .el-dialog.hc-modal-border .el-dialog__footer {
        border-color: hsla(0, 0%, 100%, 0.2);
    }
    .el-form-item--large .el-form-item__content .form-item-div {
        border-color: hsla(0, 0%, 100%, 0.2);
        color: hsla(0, 0%, 100%, 0.8);
    }
    .hc-counter-box .counter-box {
        color: hsla(0, 0%, 100%, 0.8);
    }
    .hc-counter-box .counter-box .counter-btn {
        border-color: hsla(0, 0%, 100%, 0.2);
        background-color: #414141;
    }
    .hc-counter-box .counter-box .counter-btn[disabled=true] {
        background-color: #c4c4c4;
        color: #949393;
    }
    .hc-counter-box .counter-box .counter-val {
        border-color: hsla(0, 0%, 100%, 0.2);
    }
    .el-card.hc-new-card-box .hc-card-header-box {
        border-color: hsla(0, 0%, 100%, 0.2);
    }
    .sort-node-body-box.list-group {
        border-color: hsla(0, 0%, 100%, 0.2);
    }
    .sort-node-body-box.list-group.header .list-group-item {
        background-color: #191919;
        color: hsla(0, 0%, 100%, 0.8);
    }
    .sort-node-body-box.list-group .list-group-item:hover {
        background-color: #252424;
    }
    .sort-node-body-box.list-group .list-group-item + .list-group-item {
        border-color: hsla(0, 0%, 100%, 0.2);
    }
    //分页
    .card-page-box .el-pagination.is-background .btn-next,
    .card-page-box .el-pagination.is-background .btn-prev,
    .card-page-box .el-pagination.is-background .el-pager li {
        border-color: hsla(0, 0%, 100%, 0.2);
    }
    //日志填报
    .el-menu.hc-ledger-query-menu {
        --el-menu-text-color: initial;
        --el-menu-hover-bg-color: #343434;
    }
    .el-menu.hc-ledger-query-menu .el-sub-menu .el-menu-item.is-active {
        background: #181818;
        border: 1px solid hsla(0, 0%, 100%, 0.2);
        box-shadow: none;
        color: white;
    }
    .hc-table-form-content .hc-table-forem-box, .hc-table-form-content .hc-fixed-page,
    .hc-table-form-content .hc-right-pian-box, .hc-table-form-content .hc-footer-box {
        padding: 8px;
        background: #181818;
        border-color: #131313;
    }
    .hc-date-calendar-box .hc-date-picker-box {
        border-color: hsla(0, 0%, 100%, 0.2);
    }
    .hc-date-calendar-box .hc-date-picker-box .hc-date-btn-box .hc-div-btn {
        background: #343434;
        color: hsla(0, 0%, 100%, 0.8);
        border: 1px solid hsla(0, 0%, 100%, 0.2);
        box-shadow: none;
        &:hover {
            color: var(--el-color-primary);
        }
    }
    .hc-date-calendar-box .hc-date-dates .hc-date-dates-day {
        color: hsla(0, 0%, 100%, 0.8);
        &:hover {
            color: var(--el-color-primary);
        }
    }
    .hc-date-calendar-box .hc-date-dates .hc-date-dates-day.choice {
        box-shadow: none;
    }
    .hc-table-form-content .hc-content-box .hc-fixed-page .hc-fixed-page-list-box .fixed-page-item {
        background: #343434;
        color: hsla(0, 0%, 100%, 0.8);
        border: 1px solid hsla(0, 0%, 100%, 0.2);
        box-shadow: none;
    }
    .hc-layout-box .hc-chart-content-box {
        background: #181818;
    }
    .hc-layout-box .hc-round-chart-card-box,
    .hc-layout-box .hc-report-chart-card-box,
    .hc-layout-box .hc-media-chart-card-box {
        background: #181818;
    }
    .hc-layout-box .hc-round-chart .hc-round-chart-card-box .hc-card-content-box .card-title {
        color: hsla(0,0%,100%,0.46);
    }
    .hc-layout-box .hc-round-chart .hc-round-chart-card-box .hc-card-content-box .card-ratio-box .ratio-num {
        color: hsla(0, 0%, 100%, 0.8);
    }
    .hc-layout-box .hc-round-chart .hc-round-chart-card-box .hc-card-content-box .card-amount-box .amount-divider{
        background-color: hsla(0, 0%, 100%, 0.2);
    }
    .hc-layout-box .hc-chart-flex .hc-report-chart-card-box .hc-chart-title .title,
    .hc-layout-box .hc-chart-flex .hc-media-chart-card-box .hc-chart-title .title {
        color: hsla(0,0%,100%,0.46);
    }
    .hc-layout-box .hc-chart-flex .hc-report-chart-card-box .hc-report-chart-box,
    .hc-layout-box .hc-chart-flex .hc-media-chart-card-box .hc-report-chart-box,
    .hc-layout-box .hc-chart-flex .hc-report-chart-card-box .hc-media-chart-box,
    .hc-layout-box .hc-chart-flex .hc-media-chart-card-box .hc-media-chart-box,
    .hc-layout-box .hc-chart-flex .hc-media-chart-card-box .hc-media-chart-box .hc-media-pian-box {
        background: #343434;
        color: hsla(0, 0%, 100%, 0.8);
        border: 1px solid hsla(0, 0%, 100%, 0.2);
    }

}