@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }

    body {
        background-color: #1a1a2e;
        color: #e0e0e0;
    }

    a {
        color: #7eb8da;
    }

    a:hover {
        color: #a8d4f0;
    }

    header,
    .header {
        background-color: #16213e !important;
        color: #e0e0e0;
    }

    footer {
        background-color: #16213e !important;
        color: #999;
    }

    input[type="text"],
    input[type="search"],
    select,
    textarea {
        background-color: #2a2a4a;
        color: #e0e0e0;
        border-color: #444;
    }

    input[type="text"]:focus,
    input[type="search"]:focus {
        border-color: #7eb8da;
        outline-color: #7eb8da;
    }

    pre,
    code {
        background-color: #2a2a4a;
        color: #c8d6e5;
        border-color: #444;
    }

    .package,
    .card,
    [class*="package-"] {
        background-color: #22223b;
        border-color: #333;
    }

    .package:hover,
    .card:hover {
        background-color: #2a2a4a;
    }

    table {
        border-color: #444;
    }

    th {
        background-color: #16213e;
        color: #e0e0e0;
    }

    td {
        border-color: #333;
    }

    tr:nth-child(even) {
        background-color: #22223b;
    }

    .modal,
    .dialog,
    [class*="modal"],
    [class*="dialog"],
    [class*="popup"] {
        background-color: #22223b;
        color: #e0e0e0;
        border-color: #444;
    }

    button,
    .btn {
        background-color: #2a2a4a;
        color: #e0e0e0;
        border-color: #555;
    }

    button:hover,
    .btn:hover {
        background-color: #3a3a5a;
    }

    hr {
        border-color: #444;
    }

    .abandoned,
    .deprecated {
        background-color: #3d1f1f;
        border-color: #6b3030;
    }

    ::placeholder {
        color: #888;
    }

    img {
        opacity: 0.9;
    }
}