Dark mode support for some bootstrap components

bootstrap-dark.css

/* https://gist.github.com/brandosha/b2848a060a691c98eeee54446202c8f3 */

body { transition: background 0.25s; }

@media (prefers-color-scheme: dark) {
    body, .full-page-container {
        background: black;
        color: #cccccc;
    }

    .form-control:disabled, .form-control[readonly] { background: #050505; }
    .form-control-plaintext { color: #bbbbbb; }
    .form-control, .form-control:focus {
        background: #111111;
        color: #aaaaaa;
        border-color: #222222;
    }

    .dropdown-menu { background: #222222; }
    .dropdown-item { color: #cccccc; }
    .dropdown-item:hover {
        background: #151515;
        color: #cccccc;
    }
    .dropdown-item.active {
        background-color: #007bff;
        color: white;
    }
    
    .text-dark { color: #bbbbbb!important; }
    a.text-dark:focus, a.text-dark:hover { color: #aaaaaa!important; }
    
    .btn { color: #f8f9fa; }
    .btn:hover { color: #f8f9fa; }
    .btn-light { background: #bbbbbb; }
    .btn-light:hover { background: #aaaaaa; }
    .btn-outline-dark { color: #bbbbbb }
    .btn-outline-dark.disabled, .btn-outline-dark:disabled { color: #aaaaaa }

    .modal-content { background: #333333; }

    .close {
        color: #cccccc;
        text-shadow: none;
    }
    .close:hover { color: #bbbbbb; }

    .input-group-text {
        background: #222222;
        border-color: #222222;
        color: #999999;
    }

    .card {
      background-color: #111111;
      border-color: rgba(255, 255, 255, 0.3);
    }

    .card-header { border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
    .card-footer { border-top: 1px solid rgba(255, 255, 255, 0.3); }
}