@media not all and (prefers-color-scheme: dark) {
    :root {
        color-scheme: light;
        --success-primary: #060;
        --success-secondary: #0a0;
        --failure-primary: #d00;
        --failure-secondary: #f24;
        --progress-primary: #27f;
        --progress-secondary: #48f;
        --progress-tertiary: #7af;
        --border: #ddd;
        --border-active: #777;
        --icon-primary: #333;
        --icon-primary-active: #000;
        --icon-secondary: #888;
        --icon-warning: #f00;
        --icon-ready: #33f;
        --icon-ready-active: #00b;
        --icon-unavailable: #999;
        --button-text: #000;
        --button-background: #ccc;
        --button-background-active: #aaa;
        --button-border: #bbb;
        --button-disabled-text: #666;
        --button-disabled-background: #eee;
        --button-disabled-border: #ddd;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --success-primary: #0d0;
        --success-secondary: #080;
        --failure-primary: #f34;
        --failure-secondary: #a00;
        --progress-primary: #37f;
        --progress-secondary: #25d;
        --progress-tertiary: #36c;
        --border: #555;
        --border-active: #999;
        --icon-primary: #bbb;
        --icon-primary-active: #fff;
        --icon-secondary: #777;
        --icon-warning: #f00;
        --icon-ready: #35f;
        --icon-ready-active: #47f;
        --icon-unavailable: #444;
        --button-text: #fff;
        --button-background: #444;
        --button-background-active: #666;
        --button-border: #666;
        --button-disabled-text: #888;
        --button-disabled-background: #222;
        --button-disabled-border: #333;
    }
}