@media (prefers-color-scheme: dark) {
    body,
    .el-dialog,
    .el-table,
    .el-table th,
    .el-table tr,
    .el-message-box,
    .el-message,
    .el-picker-panel,
    .at-night-effect,
    .el-menu,
    .el-popover,
    .el-tabs--border-card,
    .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active,
    .el-divider__text {
        background-color: #333 !important;
        color: #ccc;
    }

    .el-table tr:hover td,
    .el-alert--success.is-light,
    .el-alert--warning.is-light,
    .el-alert--danger.is-light,
    .el-tag,
    .el-select-dropdown,
    .el-dropdown-menu,
    .input-with-select .el-input-group__prepend,
    .el-input-group__append,
    .el-input-group__prepend,
    .el-pagination .btn-next,
    .el-pagination .btn-prev,
    .el-pager li,
    .at-night-effect-bg-light,
    .el-autocomplete-suggestion,
    .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell,
    .el-tabs--border-card > .el-tabs__header {
        background-color: #404040 !important;
    }

    .el-input-group__append:hover,
    .el-input-group__prepend:hover,
    .at-night-effect-bg-dark {
        background-color: #3d3d3d !important;
    }

    .el-dialog__title,
    .el-message-box__title,
    .el-message-box__content,
    .el-form-item__label,
    .el-dialog__body,
    .el-tabs__item,
    .el-tabs__item,
    .tc-000,
    .el-switch__label,
    .el-select-dropdown__item,
    .el-radio,
    .el-pagination .btn-next,
    .el-pagination .btn-prev,
    .el-pager li,
    .at-night-effect-color,
    .el-checkbox,
    .el-autocomplete-suggestion .el-autocomplete-suggestion__list li {
        color: #ccc;
    }

    .el-switch__label.is-active,
    .el-tabs__item.is-active,
    .el-pager li.active,
    .at-night-effect-color-dark,
    .el-tabs__item.is-active {
        color: #3a8ee6;
    }

    .el-input__inner,
    .el-checkbox__inner,
    .el-radio__inner,
    .el-textarea__inner,
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover,
    .el-dropdown-menu__item.hover,
    .el-dropdown-menu__item:hover,
    .el-radio-button__inner,
    .at-night-effect-container,
    .el-autocomplete-suggestion .el-autocomplete-suggestion__list li:hover {
        background-color: #444;
        color: #ccc;
        border-color: #666;
    }

    .el-table,
    .el-table tr,
    .el-table td,
    .el-table th,
    body h3,
    .footer-line {
        border-color: #666 !important;
    }

    .el-table:before,
    .el-table:after,
    .el-tabs__nav-wrap::after,
    .el-tabs__nav-wrap::after {
        background-color: #999;
    }


    .tc-333,
    .tc-666 {
        color: #999;
    }

    .box-shadow {
        box-shadow: 0 0 20px 0 #444;
    }

    .el-popper[x-placement^=bottom] .popper__arrow::after {
        border-bottom-color: #444;
    }

    .el-popper[x-placement^=top] .popper__arrow::after {
        border-top-color: #444;
    }

    .el-popper[x-placement^=top] .popper__arrow {
        border-top-color: #666
    }

    .el-popper[x-placement^=bottom] .popper__arrow {
        border-bottom-color: #666;
    }

    .el-select-dropdown,
    .el-message-box,
    .el-tag,
    .el-tag.el-tag--success,
    .el-tag.el-tag--warning,
    .el-tag.el-tag--info,
    .el-tag.el-tag--primary,
    .el-message,
    .el-cascader__dropdown,
    .el-form-item.top-split,
    .el-tabs--card > .el-tabs__header .el-tabs__nav,
    .el-tabs--card > .el-tabs__header .el-tabs__item,
    .el-tabs--card > .el-tabs__header,
    .el-radio-button:first-child .el-radio-button__inner,
    .el-input-group__append,
    .el-input-group__prepend,
    .el-picker-panel,
    .el-date-table th,
    .el-date-picker__header--bordered,
    .at-night-effect-border,
    .el-autocomplete-suggestion,
    .el-menu.el-menu--horizontal,
    .el-popover,
    .el-tabs--border-card,
    .el-tabs--border-card > .el-tabs__header,
    .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
        border-color: #666
    }

    .el-popper[x-placement^=bottom] .popper__arrow {
        border-bottom-color: #666;
    }

    .el-input__inner:hover,
    .el-checkbox__inner:hover,
    .el-radio__inner:hover {
        border-color: #999
    }
}
