html.dark {
    --el-box-shadow-light: 0px 0px 4px rgba(0, 0, 0, 0.1) !important;
    --el-border-color-lighter: #1d2023;
    --el-fill-color-blank: #111417;
    --el-bg-color: rgba(0, 11, 21, 1);
    // --el-text-color-primary: #999999;
    --el-text-color-regular: #bbbfc4 !important;
    --el-fill-color-light: #111417;
    --el-border-color: #303438;
    --el-bg-color-overlay: rgba(0, 11, 21, 1);
    --el-border-color-light: #1d2023;
    // * menu
    --el-menu-bg-color: #111417 !important;
    --el-menu-item-bg-color: #111417;
    --el-menu-text-color: #ffffff;
    --el-menu-item-bg-color-active: rgb(44, 45, 46);

    // * panel-admin
    --panel-text-color: rgb(174, 166, 153);
    --panel-border: 1px solid #1d2023;
    --panel-border-color: #394c5e;
    --panel-main-bg-color: rgba(12, 12, 12, 1);
    --panel-button-active: var(--el-color-primary);

    --panel-login-shadow-light: 5px 5px 15px rgb(255 255 255 / 20%);
    --panel-box-shadow-light: 0 0 10px rgb(255 255 255 / 10%);
    --panel-popup-color: #060708;
    --panel-alert-bg: #2f3030;
    --panel-path-bg: #2f3030;
    --panel-button-disabled: #5a5a5a;

    .el-tag.el-tag--info {
        --el-tag-bg-color: rgb(49, 51, 51);
        --el-tag-border-color: rgb(64, 67, 67);
    }
    .el-tag.el-tag--light {
        --el-tag-bg-color: #111417;
        --el-tag-border-color: var(--el-color-primary);
    }
    .el-tag.el-tag--success {
        --el-tag-border-color: var(--el-color-success);
    }
    .el-tag.el-tag--danger {
        --el-tag-border-color: var(--el-color-danger);
    }
    .el-card {
        --el-card-bg-color: #111417;
        color: #ffffff;
        border: 1px solid var(--el-card-border-color) !important;
    }

    .el-table {
        --el-table-bg-color: rgba(0, 11, 21, 1);
        --el-table-tr-bg-color: rgba(0, 11, 21, 1);
        --el-table-header-bg-color: rgba(0, 11, 21, 1);
        --el-table-border: var(--panel-border);
        --el-table-border-color: rgb(64, 67, 67);
    }
    .el-message-box {
        --el-messagebox-title-color: var(--el-menu-text-color);
        border: 1px solid var(--panel-border-color);
    }

    .el-alert--info {
        --el-alert-bg-color: rgb(56, 59, 59);
    }

    .el-input {
        --el-input-bg-color: rgb(47 48 48);
        --el-input-border-color: #303438;
    }

    .el-pagination {
        --el-pagination-button-color: #999999;
    }

    .el-popover {
        --el-popover-title-text-color: #999999;
        border: 1px solid var(--panel-border-color);
    }

    // * wangEditor
    --w-e-textarea-bg-color: #1b1b1b;
    --w-e-textarea-color: #eeeeee;

    .md-editor-dark {
        --md-bk-color: #111417;
    }

    // * 以下为自定义暗黑模式内容
    // login
    .login-container {
        .login-form {
            input:-webkit-autofill {
                box-shadow: 0 0 0 1000px #f1f4f9 inset;
                -webkit-text-fill-color: #333333;
                -webkit-transition: background-color 1000s ease-out 0.5s;
                transition: background-color 1000s ease-out 0.5s;
            }
            .el-input__wrapper {
                background-color: #ffffff;
                box-shadow: 0 0 0 1px #dcdfe6 inset;
            }
            .el-input__inner {
                color: #606266;
            }
        }
    }

    // scroll-bar
    ::-webkit-scrollbar {
        background-color: var(--el-scrollbar-bg-color) !important;
    }
    ::-webkit-scrollbar-thumb {
        background-color: var(--el-border-color-darker);
    }
    // sidebar
    .sidebar-container-popper {
        border: 1px solid #66686c;
        .el-menu--popup-container {
            border: none;
        }
    }
    .sidebar-container {
        border-right: 1px solid var(--el-border-color-light);
    }
    .el-menu {
        .el-menu-item {
            &:hover {
                background: rgba(37, 39, 44, 1);
            }
            &.is-active {
                background: var(--el-color-primary);
                color: #ffffff;
                &:hover {
                    .el-icon {
                        color: #ffffff !important;
                    }

                    span {
                        color: #ffffff !important;
                    }
                }
                &::before {
                    background: #ffffff;
                }
            }
        }
        .el-sub-menu {
            .el-sub-menu__title {
                &:hover {
                    background: rgba(37, 39, 44, 1);
                }
            }
        }
    }
    .menu-collapse {
        color: var(--el-menu-text-color);
        border: var(--panel-border);
    }

    // layout
    .app-wrapper {
        .main-container {
            background-color: var(--panel-main-bg-color) !important;
        }
        .app-footer {
            background-color: var(--panel-main-bg-color) !important;
            border-top: var(--panel-border);
        }
        .mobile-header {
            background-color: var(--panel-main-bg-color) !important;
            border-bottom: var(--panel-border);
            color: #ffffff;
        }
    }
    .system-label {
        color: var(--el-menu-text-color);
    }

    .router_card_button {
        .el-radio-button__inner {
            background: none !important;
        }
        .el-radio-button__original-radio:checked + .el-radio-button__inner {
            color: #ffffff;
            background-color: var(--panel-button-active) !important;
            box-shadow: none !important;
            border: none !important;
        }
    }
    // content-box
    .content-box {
        .text {
            color: var(--el-text-color-regular) !important;
        }
    }

    .el-drawer .el-drawer__header span {
        color: var(--el-menu-text-color);
    }
    .el-drawer {
        border-left: 0.5px solid var(--panel-border-color);
    }

    .el-input__wrapper {
        background-color: var(--el-disabled-bg-color);
    }
    .el-input.is-disabled .el-input__wrapper {
        box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
    }
    .el-radio-button__inner {
        background: #1d2023;
    }
    .el-button--primary.is-plain.is-disabled {
        background: #1d2023;
        border-color: #303438;
    }
    .el-button--primary.is-plain {
        background: #1d2023;
        border-color: #303438;
    }
    .el-button.is-link.is-disabled {
        color: var(--panel-button-disabled) !important;
    }
    .el-button.is-disabled {
        border-color: #303438;
        color: var(--panel-button-disabled);
    }
    .el-popper.is-dark {
        color: rgb(171 173 173);
    }
    .path {
        border: var(--panel-border);
        .split {
            color: #666666;
        }
    }
    input:-webkit-autofill {
        box-shadow: 0 0 0 1000px #323232 inset;
        -webkit-text-fill-color: #cfd3dc;
        transition: background-color 1000s ease-out 0.5s;
    }
    .el-avatar {
        --el-avatar-bg-color: #111417 !important;
        box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1);
        border: 0.5px solid #1f2022;
    }
    .el-page-header__content {
        color: rgb(174, 166, 153);
    }
    .el-dialog {
        .el-dialog__header {
            border-bottom: var(--panel-border);
            color: #999999;
            .el-dialog__title {
                color: var(--el-menu-text-color);
            }
        }
        border: 1px solid var(--panel-border-color);
    }
    .el-tabs__item {
        color: #999999;
    }
    .el-tabs__item.is-active {
        color: var(--el-color-primary) !important;
    }
    .el-descriptions__title {
        color: #999999;
    }
    .el-descriptions__content.el-descriptions__cell.is-bordered-content {
        color: #999999;
    }
    .terminal-tabs {
        background: none !important;
        .el-tabs__header {
            background: #000000;
        }
    }
    .el-pager {
        li {
            color: #999999;
            &.is-active {
                color: var(--el-pagination-hover-color);
            }
        }
    }
    .el-loading-mask {
        background-color: rgba(0, 0, 0, 0.8);
    }

    .h-app-card {
        .h-app-content {
            .h-app-title {
                color: #f2f8ff;
            }
        }
    }

    .infinite-list .infinite-list-item {
        background: #212426;
        &:hover {
            background: #212426;
        }
    }

    .el-alert--warning.is-light {
        background-color: rgb(56, 59, 59);
        color: var(--el-color-warning);
    }
    .el-dropdown-menu__item.is-disabled {
        color: var(--panel-button-disabled);
    }
    .el-date-editor .el-range-separator {
        color: var(--panel-button-disabled);
    }

    .el-input-group__append {
        border-left: 0;
        &:hover {
            color: var(--el-color-primary);
            background-color: var(--el-color-primary-light-9) !important;
        }
        background-color: #212426 !important;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        box-shadow: 0 1px 0 0 var(--el-input-border-color) inset, 0 -1px 0 0 var(--el-input-border-color) inset,
            -1px 0 0 0 var(--el-input-border-color) inset;
    }

    .el-collapse-item__header {
        color: #ffffff;
    }
}