@media screen and (prefers-color-scheme: dark) {

    body {
        background-color: black;
    }

    .offcanvas,
    .navbar,
    .btn,
    .dropdown-menu,
    .text-dark,
    .bg-light,
    .navbar-nav .show>.nav-link,
    .nav-link,
    .card,
    .text-muted,
    .card-title,
    .form-control,
    .navbar-nav {
        --bs-offcanvas-color: white;
        --bs-navbar-brand-hover-color: white;
        --bs-navbar-brand-color: white;
        --bs-btn-color: white;
        --bs-body-bg: rgb(12, 12, 12);
        --bs-btn-hover-color: white;
        --bs-btn-active-color: white;
        --bs-body-color: white;
        --bs-dropdown-link-hover-bg: rgb(23, 23, 23);
        --bs-dark-rgb: 225, 225, 225;
        --bs-light-rgb: 20, 20, 20;
        --bs-navbar-active-color: white;
        --bs-nav-link-color: white;
        --bs-secondary-color: rgb(162, 162, 162);
        --bs-card-title-color: white;
        --bs-form-control-bg: rgb(12, 12, 12);
        --bs-link-hover-color: white;
        --bs-nav-link-hover-color: rgb(206, 206, 206);
        --bs-border-color: #292929;
    }

    .img-icon-dark,
    .navbar-toggler-icon,
    .offcanvas-header .btn-close,
    .btn-close {
        filter: invert(1);
    }

    .badge {
        color: white !important;
        background-color: #2d2d2d !important;
    }

    #apiTypeList>li>button,
    .card-text,
    .spinner-border {
        color: white;
    }

    .img-fuild {
        filter: brightness(0.6);
    }

    .small,
    small {
        color: rgb(185, 185, 185);
    }

    .box-shadow-line-buttom-acacac-dark-2e2e2e {
        box-shadow: #2e2e2e 0px 5px 0px 0px;
    }

    .bg-danger,
    .badge.bg-danger {
        --bs-bg-opacity: 0.8;
        background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
    }

    .border-top-nav-2a2a2a{
        border-top: #2a2a2a 2px solid;
    }
}