@media only screen and (prefers-color-scheme: dark) {
    body[color-scheme='dark'] {
        --background: hsl(var(--hue), var(--sat), var(--light));
        --background-dropdown: #444;
        --color-body: #e6e6e6;
        --color-heading: #ccc;
        --color-link-hover: #888;
        --color-link: #e6e6e6;
        --color-blockquote: #aaa;
        --color-mode: 'dark';
        --color-nav-hover: #555;
        --color-nav: #999;
        --color-title: white;
        --invert-svg: 1;
        --light: 15%;
        --light-code: 10%;
        --light-selection: 68.4%;
        --light-toc-border: 6.1%;
    }
}

body[color-scheme='dark'] {
    --background: hsl(var(--hue), var(--sat), var(--light));
    --background-dropdown: #444;
    --color-body: #e6e6e6;
    --color-heading: #ccc;
    --color-link-hover: #888;
    --color-link: #e6e6e6;
    --color-blockquote: #aaa;
    --color-mode: 'dark';
    --color-nav-hover: #555;
    --color-nav: #999;
    --color-title: white;
    --invert-svg: 1;
    --light: 15%;
    --light-code: 10%;
    --light-selection: 68.4%;
    --light-toc-border: 6.1%;
}