:root {
    @each $varName, $varDefault in $css-vars {
        --#{$varName}: #{$varDefault};
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #{$background-color-dark};
        --text-color: white;

        --warning-background-color: #{$warning-background-color-dark};
        --warning-border-color: #{$warning-border-color-dark};

        --target-background-color: #{$target-background-color-dark};

        --code-color: #{$code-color-dark};
        --code-keyword-color: #{$code-token-color-dark};
        --code-type-color: #{$code-token-color-dark};
        --code-highlight-color: #{$code-highlight-color-dark};
    }
}