hac/src/styles/app/theme.scss

//通用样式
html {
    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;
    --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;
    //左侧菜单
    .hc-layout-box .hc-aside-box .hc-aside-logo-box .logo-img-1 {
        &.white {
            display: block;
        }
        &.dark {
            display: none;
        }
    }
}

//深色主题设置
html.dark {
    --hc-body-bg-color: #101014;
    --hc-bg-color: #292929;
    --hc-text-color: rgba(255, 255, 255, 0.82);
    --hc-shadow: 4px 4px 8px 0 rgba(0,0,0,0.15), -4px -4px 8px 0 #3d3d3d;
    --el-bg-color-overlay: #393939;
    --hc-border-color: #474646;
    --hc-label-color: #8f9eb2;
    html, body, #app {
        background: var(--el-bg-color-overlay);
    }
    //首页背景
    .hc-layout-box .hc-layout-bg-box {
        opacity: .1;
    }
    //左侧菜单
    .hc-layout-box .hc-aside-box {
        color: var(--el-text-color-primary);
        background: var(--el-bg-color-overlay);
        box-shadow: initial;
        border: 1px solid var(--hc-border-color);
        border-left: 0;
        border-bottom: 0;
        &.home-index {
            color: var(--el-text-color-primary);
            background: var(--el-bg-color-overlay);
            backdrop-filter: initial;
            -webkit-backdrop-filter: initial;
        }
        .hc-aside-logo-box .logo-img-1 {
            &.white {
                display: none;
            }
            &.dark {
                display: block;
            }
        }
        //菜单
        .el-menu-item, .el-sub-menu__title {
            color: var(--hc-label-color);
        }
        .el-menu-item.is-active {
            color: inherit;
        }
        .hc-aside-bar-box:before {
            background-image: linear-gradient(90deg, rgba(102, 102, 102, 0) 11%, #474646 35%, #474646 64%, rgba(102, 102, 102, 0) 86%);
        }
    }
    //左栏
    .hc-layout-box .hc-layout-left-box {
        color: var(--el-text-color-primary);
        background: var(--el-bg-color-overlay);
        box-shadow: initial;
        border: 1px solid var(--hc-border-color);
    }
    .hc-layout-box .hc-layout-left {
        background: var(--el-bg-color-overlay);
        border: 1px solid var(--hc-border-color);
        color: var(--hc-label-color);
        box-shadow: initial;
    }
    .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 {
        background: var(--el-bg-color-overlay);
        border: 1px solid var(--hc-border-color);
        color: var(--hc-label-color);
        box-shadow: initial;
    }
    //小图标时的菜单
    .aside-menu-popper.el-popper .el-menu--vertical .el-menu {
        background-color: #393939;
        color: #8f9eb2;
    }
    //卡片
    .hc-card-box.el-card {
        box-shadow: initial;
        color: var(--hc-text-color);
        border: 1px solid var(--hc-border-color);
        .el-card__header {
            border-bottom: 1px solid var(--hc-border-color);
        }
        .el-card__body .hc-card-action-box {
            border-top: 1px solid var(--hc-border-color);
            background-color: var(--el-bg-color-overlay);
        }
    }
    //设置里的副标题
    .hc-screenshot-box .item .label {
        color: var(--hc-label-color);
    }
    //设置里的选择卡片
    .hc-theme-box .item {
        border: 1px solid var(--hc-border-color);
        background-color: var(--el-bg-color-overlay);
        &.active {
            box-shadow: 4px 4px 8px 0 rgba(61,60,60,0.15), 0 0 8px 0 #1d1d1d;
        }
        .action {
            background-color: var(--hc-bg-color);
            border-top: 1px solid var(--hc-border-color);
        }
    }

    //顶部项目合同下拉框
    .hc-layout-box .hc-container-view .hc-header-view .hc-header-content .hc-header-cascader-box .el-cascader .el-input .el-input__wrapper {
        background: #696969;
    }
    .hc-layout-box .hc-container-view .hc-header-view .hc-header-content .hc-header-cascader-box .el-cascader .el-input.is-focus .el-input__wrapper {
        box-shadow: var(--hc-shadow);
    }
    .hc-layout-box .hc-container-view .hc-header-view .hc-header-content .hc-header-cascader-box .el-cascader .el-input .el-input__wrapper .el-input__inner,
    .hc-layout-box .hc-container-view .hc-header-view .hc-header-content .hc-header-cascader-box .el-cascader .el-input .el-input__wrapper .el-input__suffix {
        color: var(--hc-text-color);
    }
    //顶部图标按钮
    .header-icon-bar {
        background: #696969;
        color: var(--hc-text-color);
    }
    //顶部用户信息
    .user-info-bar {
        .user-name, .arrow-icon {
            color: var(--hc-text-color);
        }
        &:before {
            border-color: var(--hc-border-color);
        }
    }

    //按钮
    .el-button[hc-btn] {
        border-color: var(--hc-border-color);
    }
    .el-button[hc-btn].is-disabled:not([class*=el-button--]) {
        --el-button-disabled-text-color: var(--el-color-info-light-5);
        --el-button-disabled-bg-color: var(--el-color-info-light-9);
    }

    //日期范围
    .el-date-editor .el-range-separator {
        color: #89898a;
    }

    //切换卡片
    .hc-sb-table .el-tabs .el-tabs__header .el-tabs__nav .el-tabs__item {
        background: var(--hc-bg-color);
        --el-text-color-primary: var(--hc-label-color);
        &:after {
            background-color: var(--hc-border-color);
        }
    }
    .hc-sb-table .el-tabs .el-tabs__active-bar {
        background: var(--el-bg-color-overlay);
        &:after, &:before {
            background: var(--el-bg-color-overlay);
        }
    }

    //表格
    .hc-table-ref-box {
        border-color: var(--hc-border-color);
        .el-table[hc] {
            --el-table-bg-color: initial;
            --el-table-header-bg-color: var(--hc-bg-color);
            --el-table-header-text-color: var(--hc-label-color);
            --el-table-tr-bg-color: var(--el-bg-color-overlay);
            --el-fill-color-lighter: #363535;
            --el-table-text-color: var(--hc-text-color);
            --el-table-row-hover-bg-color: #454545;
        }
        .el-table[hc].el-table--border {
            --el-table-border-color: var(--hc-border-color);
        }
        .el-table__body-wrapper tr td.el-table-fixed-column--left,
        .el-table__body-wrapper tr td.el-table-fixed-column--right,
        .el-table__body-wrapper tr th.el-table-fixed-column--left,
        .el-table__body-wrapper tr th.el-table-fixed-column--right,
        .el-table__footer-wrapper tr td.el-table-fixed-column--left,
        .el-table__footer-wrapper tr td.el-table-fixed-column--right,
        .el-table__footer-wrapper tr th.el-table-fixed-column--left,
        .el-table__footer-wrapper tr th.el-table-fixed-column--right,
        .el-table__header-wrapper tr td.el-table-fixed-column--left,
        .el-table__header-wrapper tr td.el-table-fixed-column--right,
        .el-table__header-wrapper tr th.el-table-fixed-column--left,
        .el-table__header-wrapper tr th.el-table-fixed-column--right {
            --el-bg-color: #444444;
        }
    }

    //分页
    .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: var(--hc-border-color);
    }
    //弹窗
    .el-overlay-dialog .el-dialog {
        background: var(--el-bg-color-overlay);
        &.hc-modal-border {
            .el-dialog__header {
                border-color: var(--hc-border-color);
            }
            .el-dialog__footer {
                border-color: var(--hc-border-color);
            }
        }
    }
    .el-message-box {
        background: var(--el-bg-color-overlay);
    }

    //表单
    .el-form-item--large .el-form-item__content .form-item-dashed {
        border-color: #4c4d4f;
    }

    //步进器
    .hc-counter-box .counter-box {
        color: var(--hc-text-color);
        .counter-btn {
            border-color: var(--hc-border-color);
            color: var(--hc-text-color);
            background-color: var(--el-bg-color-overlay);
        }
        .counter-btn[disabled=true] {
            color: var(--hc-label-color);
            background-color: var(--hc-bg-color);
        }
        .counter-val {
            border-color: var(--hc-border-color);
        }
    }
    //工单服务
    .hc-order-service .order-service-content .content-box .comment-card-box {
        border: 1px solid var(--hc-border-color);
        background: var(--el-bg-color-overlay);
        .card-content-box .user-info-box .text-lg {
            color: var(--hc-text-color);
        }
        .card-content-box .desc_para {
            color: var(--hc-text-color);
        }
        .collapse-comment-box .user-comment-info-box .user-comment-box .user-comment-content-box {
            color: var(--hc-text-color);
        }
    }

    //选择任务人
    .hc-tasks-user .tasks-user-box {
        border-color: var(--hc-border-color);
    }
    .hc-tasks-user-modal-content-box .user-box .y-user-list-box .title-box,
    .hc-tasks-user-modal-content-box .user-box .s-user-list-box .title-box {
        border-color: var(--hc-border-color);
        background-color: var(--hc-bg-color);
        color: var(--hc-label-color);
    }
    .hc-tasks-user-modal-content-box .user-box .s-user-list-box {
        border-color: var(--hc-border-color);
    }
    .hc-tasks-user-modal-content-box .user-box .y-user-list-box .user-list .user-item + .user-item,
    .hc-tasks-user-modal-content-box .user-box .s-user-list-box .user-list .user-item + .user-item {
        border-color: var(--hc-border-color);
    }
    .hc-tasks-user-modal-content-box .tree-box {
        border-color: var(--hc-border-color);
        .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
            background-color: #454545;
            color: #ffffff;
        }
    }
    .sort-node-body-box.list-group {
        border-color: var(--hc-border-color);
        .list-group-item + .list-group-item{
            border-color: var(--hc-border-color);
        }
    }
    .sort-node-body-box.list-group.header .list-group-item {
        background-color: var(--hc-bg-color);
        color: var(--hc-label-color);
    }
    //左侧小菜单栏
    .hc-menu-simple-box .item-box {
        border: 1px solid var(--hc-border-color);
        background: var(--el-bg-color-overlay);
        .icon-box {
            background-color: var(--hc-bg-color);
            color: var(--hc-label-color);
        }
        .label-box {
            color: var(--hc-label-color);
        }
        &.active {
            .label-box {
                color: var(--hc-text-color);
            }
        }
        &:hover:not(.active) {
            .icon-box {
                color: var(--hc-text-color);
                background-color: var(--hc-bg-color);
            }
            .label-box {
                color: var(--hc-text-color);
                font-weight: 500;
            }
        }
    }
    //树
    .el-tree.hc-tree-node {
        --el-tree-node-hover-bg-color: var(--hc-bg-color);
    }
    .hc-tree-node.tree-line .el-tree-node.is-expanded.is-current.is-focusable {
        background: var(--hc-bg-color);
    }
    .data-custom-tree-node .menu-icon {
        background: initial;
        color: var(--el-bg-color-overlay);
    }
    .hc-tree-node .data-custom-tree-node {
        color: var(--hc-label-color);
    }
    .el-tree.hc-tree-node.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
        background-color: var(--hc-bg-color);
        .data-custom-tree-node {
            color: var(--hc-text-color);
        }
    }
    //工程划分树
    .hc-page-layout-box .hc-layout-left-box .hc-project-box {
        border-color: var(--hc-border-color);
    }
    .hc-page-content-box.hc-division-page .project-info {
        height: calc(100% - 346px);
    }
    .hc-page-content-box.hc-division-page .footer-box {
        color: var(--el-text-color-primary);
        background: var(--el-bg-color-overlay);
        border: 1px solid var(--hc-border-color);
        box-shadow: initial;
    }
    .hc-import-temp-box .hc-import-node-tree-box .import-node-tree-box,
    .hc-import-temp-box .hc-import-node-tree-box .import-node-tree-box .hc-tree-title-box {
        border-color: var(--hc-border-color);
    }
    .hc-layout-box .hc-layout-left-box .hc-project-box,
    .hc-layout-box .hc-layout-left-box .hc-tree-foot-tip-box {
        border-color: var(--hc-border-color);
    }

    .copy-node-many-box, .copy-node-many-box .copy-node-many-tree {
        border-color: var(--hc-border-color);
    }

    .data-fill-list-box .el-collapse .el-collapse-item {
        background-color: var(--el-bg-color-overlay);
        border-color: var(--hc-border-color);
        .hc-collapse-item-header .item-title {
            color: var(--hc-label-color);
        }
        .el-collapse-item__header .el-collapse-item__arrow {
            color: var(--hc-label-color);
        }
    }
    .data-fill-list-box .el-collapse .el-collapse-item.is-active .el-collapse-item__header.is-active {
        background: var(--hc-bg-color);
        .item-title, .el-collapse-item__arrow {
            color: var(--hc-text-color);
        }
    }
    .data-fill-list-box .data-fill-list-item-content .data-fill-table-tip-box {
        border-color: var(--hc-border-color);
    }

    //切换按钮
    .hc-new-switch {
        background: var(--hc-bg-color);
        box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.15) inset, -4px -4px 8px 0 var(--hc-bg-color) inset;
        .switch-bg {
            color: var(--hc-label-color);
        }
        .switch-bg.dots {
            color: var(--hc-text-color);
            box-shadow: 4px 4px 8px 0 rgba(54, 92, 167, 0.15), -3px -2px 8px 0 var(--hc-bg-color);
        }
    }
    //多级菜单
    .hc-ledger-query-menu.el-menu {
        --el-menu-text-color: var(--hc-label-color);
        .el-sub-menu .el-menu-item.is-active {
            background: var(--hc-bg-color);
            border: 1px solid var(--hc-border-color);
            color: var(--hc-text-color);
            box-shadow: initial;
        }
        .el-sub-menu__title, .el-menu-item {
            border-radius: 6px;
            &:hover {
                background: var(--hc-bg-color);
                color: var(--hc-text-color);
            }
        }
    }

    //日历
    .hc-date-calendar-box {
        .hc-date-picker-box {
            border-color: var(--hc-border-color);
            .hc-date-btn-box .hc-div-btn {
                box-shadow: initial;
                border: 1px solid var(--hc-border-color);
                background-color: var(--el-bg-color-overlay);
                &:hover {
                    background: var(--hc-bg-color);
                }
            }
        }
        .hc-date-dates {
            .hc-date-dates-day {
                color: var(--hc-label-color);
                &:hover:not([class*='choice']):not([class*='excluded']):not([class*='selected']):not([class*='cur']) {
                    background-color: var(--hc-bg-color);
                    border: 2px solid var(--hc-border-color);
                }
            }
            .hc-date-dates-day.selected {
                border-color: var(--hc-border-color);
            }
            .hc-date-dates-day.choice {
                box-shadow: initial;
                border-color: var(--hc-border-color);
            }
            .hc-date-dates-day.excluded {
                color: #5a5a5a;
            }
        }
    }
    .hc-user-time-box .tree-box {
        border-color: var(--hc-border-color);
    }
    //进度统计
    .hc-layout-box .hc-chart-content-box {
        background: var(--el-bg-color-overlay);
        border: 1px solid var(--hc-border-color);
        color: var(--hc-label-color);
        box-shadow: initial;
    }
    .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: var(--el-bg-color-overlay);
        border: 1px solid var(--hc-border-color);
        color: var(--hc-label-color);
        box-shadow: initial;
    }
    .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 {
        background: var(--el-bg-color-overlay);
        border: 1px solid var(--hc-border-color);
    }
    .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 {
        background: var(--el-bg-color-overlay);
        border: 1px solid var(--hc-border-color);
    }
    .hc-layout-box .hc-round-chart .hc-round-chart-card-box .hc-card-content-box .card-title {
        color: var(--hc-label-color);
    }
    .hc-layout-box .hc-round-chart .hc-round-chart-card-box .hc-card-content-box .card-ratio-box .ratio-num,
    .hc-layout-box .hc-round-chart .hc-round-chart-card-box .hc-card-content-box .card-ratio-box .ratio-text .unit{
        color: var(--hc-text-color);
    }
    .hc-layout-box .hc-round-chart .hc-round-chart-card-box .hc-card-content-box .card-amount-box .amount-item .num {
        color: var(--hc-label-color);
    }
    .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: var(--hc-text-color);
    }
    .hc-layout-box .hc-chart-flex .hc-media-chart-card-box .hc-media-chart-box .hc-media-pian-box {
        background: var(--hc-bg-color);
        border-color: var(--hc-border-color);
    }
    .hc-layout-box .hc-chart-flex .hc-media-chart-card-box .hc-media-chart-box .hc-media-pian-box .item .num {
        color: var(--hc-label-color);
    }
    //影像资料
    .hc-layout-box .hc-layout-content-box .hc-table-col-item .content-box .title {
        color: var(--hc-text-color);
    }
    //平曲线右上角图标按钮
    .hc-layout-box .hc-extra-icon-btn {
        color: var(--hc-label-color);
    }

    //首件工程
    .hc-first-item-node-layout .node-action,
    .hc-first-item-node-layout .node-content .node-form,
    .hc-first-item-node-layout .node-content .node-file {
        background: var(--el-bg-color-overlay);
        border: 1px solid var(--hc-border-color);
        color: var(--hc-label-color);
        box-shadow: initial;
    }

    //个人中心
    .hc-layout-box .hc-layout-left-box .user-avatar-box .user-avatar {
        border: 1px solid var(--hc-border-color);
        box-shadow: initial;
    }
    .hc-layout-box .hc-layout-left-box .user-avatar-box .user-name {
        color: var(--hc-text-color);
    }
    .hc-layout-box .hc-layout-content-box .hc-card-foot-box {
        background: var(--el-bg-color-overlay);
        border: 1px solid var(--hc-border-color);
        color: var(--hc-label-color);
        box-shadow: initial;
        border-bottom: 0;
    }
    .hc-project-menu.el-menu .el-sub-menu {
        border-color: var(--hc-border-color);
        .el-sub-menu__title {
            color: var(--hc-label-color);
        }
    }
    .hc-project-menu.el-menu .el-sub-menu.is-opened .el-sub-menu__title {
        background: var(--hc-bg-color);
        color: var(--hc-text-color);
    }
    .hc-project-menu.el-menu .el-menu-item.is-active {
        background: #4e4e4e;
        color: var(--hc-text-color);
    }
    .hc-project-menu.el-menu .el-sub-menu .el-sub-menu__title,
    .hc-project-menu.el-menu .el-sub-menu .el-menu-item {
        &:hover {
            background: var(--hc-bg-color);
            color: var(--hc-text-color);
        }
    }

    //材料进场
    .hc-switch-tab-content {
        border-color: var(--hc-border-color);
    }
    .hc-links-sample-modal-box .hc-links-sample-tree-box {
        border-color: var(--hc-border-color);
    }

    //月报汇总表格
    .hc-table-ref-box .el-table.hc-table-diy-box {
        --el-table-bg-color: initial;
        --el-table-header-bg-color: var(--hc-bg-color);
        --el-table-header-text-color: var(--hc-label-color);
        --el-table-tr-bg-color: var(--el-bg-color-overlay);
        --el-fill-color-light: #363535;
        --el-table-text-color: var(--hc-text-color);
        --el-table-row-hover-bg-color: #454545;
    }
    .hc-table-ref-box .el-table.hc-table-diy-box.el-table--border {
        --el-table-border-color: var(--hc-border-color);
    }
    .hc-table-ref-box .el-table.hc-table-diy-box thead.is-group tr:last-of-type th:nth-of-type(2)::before {
        background-color: var(--hc-border-color);
    }

    .hc-page-layout-box .hc-layout-left-box.menu .hc-menu-header-box {
        border-color: var(--hc-border-color);
    }
    .hc-menu-simple-box .item-box .menu-icon {
        background: initial;
    }
}