@media (prefers-color-scheme: dark) {
    :root {
        --header-bg: #2b2b2b;
        --header-color: #fff;
    }

    #header {
        --header-color: white;
        --header-link-color: var(--link-fg);
        border-bottom: 1px solid #2b2b2b;
    }

    #branding h1 a:link, #branding h1 a:visited {
        color: var(--link-fg);
    }

    .mode-dark {
        display: inline;
    }

    .mode-light {
        display: none;
    }
}

html[data-theme="dark"] {
    --header-bg: #2b2b2b;
    --header-color: #fff;
}

html[data-theme="dark"] #header {
    --header-color: white;
    --header-link-color: var(--link-fg);
    border-bottom: 1px solid #2b2b2b;
}

html[data-theme="dark"] #branding h1 a:link, html[data-theme="dark"] #branding h1 a:visited {
    color: var(--link-fg);
}

html[data-theme="dark"] .mode-dark {
    display: inline;
}

html[data-theme="dark"] .mode-light {
    display: none;
}