@media (prefers-color-scheme: dark) {
    @import '~ant-design-vue/dist/antd.less';
    @black_bg: #1e1f20;
    @background-color-base: @black_bg;
    @background-color-light: @black_bg;
    @btn-default-bg: @black_bg;
    @black_content: #28292c;
    @text-color: #fff;
    @text-color-secondary: #bdbdbd;
    @heading-color: #fff;

    @body-background: @black_bg;
    @component-background: @black_content;
    @layout-body-background: @black_bg;
    @layout-header-background: @black_bg;
    @layout-sider-background: @black_content;
    @ant-layout-sider-light: @black_content;
    @menu-bg: @black_content;
    @layout-trigger-background: @black_content;
    @layout-sider-background-light: @black_content;
    @layout-trigger-background-light: @black_content;

    @item-active-bg: #161717;

    @link-color: #fff;
    @table-row-hover-bg: @black_bg;
    @table-selected-row-bg: @black_bg;

    @input-bg: @black_bg;
    @disabled-bg: #363636;
    @btn-default-bg: @black_bg;
    @table-header-bg: @black_bg;
    @border-color-base: #666666;
    @disabled-color: #bcbcbc;
    @radio-button-bg: @black_bg;
    @checkbox-check-color: @black_bg;
    @popover-bg: @black_bg;

    @background-color-light: fade(@white, 4%); // background of header and selected item

    // Descriptions
    // ---
    @descriptions-bg: @background-color-light;

    // Alert
    // ---
    @alert-message-color: @black;


    .ant-select-dropdown-menu-item:hover {
        background: @black_bg;
    }

    .ant-layout-sider {
        background-color: @black_content;
    }

    .ant-checkbox-indeterminate {
        .ant-checkbox-inner {
            background-color: transparent !important;
        }
    }

    .ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover,
    .ant-transfer-list-content-item-highlight-enter, .ant-transfer-list-content-item-highlight-enter-active {
        background-color: @black_bg !important;
    }

}