@media (prefers-color-scheme: dark) {
    html {
        --font-color: #dadadb;
        --bg-color: #1d1e20;

        --card-color: #2e2e33;
        --card-border-color: #333333;

        --link-color: #599ada;
        --link-state-color: #ff5858;
        --link-state-border-color: rgba(238, 54, 54, 0.5);

        --thead-bg-color: #343a40;
        --table-border-color: lightgrey;

        --nav-bg-color: #2e2e33;
        --nav-link-color: #b6b6b6;

        --pre-color: #f8f8f2;
        --pre-bg-color: #292b2d;
        --pre-border-color: rgba(175, 184, 193, 0.3);
        --kbd-bg-color: #404347;

        --bq-color: #ccc;
        --hr-color: #333;

        --pagination-bg-color: #2e2e33;
        --pagination-link-color: #b6b6b6;
        --pagination-border-color: #333333;
        --pagination-border-radius: 5px;

        --post-info-color: grey;

        --switcher-color: #fff;

        --svg-color: #ccc;
        --svg-state-color: #ff5858;
    }
}
/* Same as above.  */
html[data-theme='dark'] {
    --font-color: #dadadb;
    --bg-color: #1d1e20;

    --card-color: #2e2e33;
    --card-border-color: #333333;

    --link-color: #599ada;
    --link-state-color: #ff5858;
    --link-state-border-color: rgba(238, 54, 54, 0.5);

    --thead-bg-color: #343a40;
    --table-border-color: lightgrey;

    --nav-bg-color: #2e2e33;
    --nav-link-color: #b6b6b6;

    --pre-color: #f8f8f2;
    --pre-bg-color: #292b2d;
    --pre-border-color: rgba(175, 184, 193, 0.3);
    --kbd-bg-color: #404347;

    --bq-color: #ccc;
    --hr-color: #333;

    --pagination-bg-color: #2e2e33;
    --pagination-link-color: #b6b6b6;
    --pagination-border-color: #333333;
    --pagination-border-radius: 5px;

    --post-info-color: grey;

    --switcher-color: #fff;

    --svg-color: #ccc;
    --svg-state-color: #ff5858;
}