@media (prefers-color-scheme: dark) {
:root {
    --bs-blue: #2c6dce;
    --bs-blue-border: #2059ad;
    --bs-blue-hover: #77aaf7;
    --bs-danger: #c03543;
    --bs-danger-border: #a02632;
}

a {
    color: var(--bs-blue);
}
a:hover, a:active, a:focus {
    color: var(--bs-blue-hover);
}

body {
    background-color: #222;
    color: #fff;
}

.form-control, .form-control:focus {
    background-color: #333;
    border: 1px solid #555;
    color: #fff;
}
.form-control:read-only {
    background-color: #222;
}

.form-select {
    background-color: #333;
    border: 1px solid #555;
    color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.table {
    border-color: #444;
    color: #fff;

    --bs-table-bg: #222;
    --bs-table-striped-bg: #333;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #333;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #333;
    --bs-table-hover-color: #fff;
}

.btn-primary {
    background-color: var(--bs-blue);
}
.btn-primary:hover {
    background-color: var(--bs-blue-border);
}
.btn-danger {
    background-color: var(--bs-danger);
    border: 1px solid var(--bs-danger-border);
}
.btn-danger:hover {
    background-color: var(--bs-danger-border);
}
.btn-link {
    color: var(--bs-blue);
}
.btn-link:hover {
    color: var(--bs-blue-hover);
}
}