$colors: (
    "primary": $primary-color,
    "secondary": $secondary-color,
    "success": $success-color,
    "danger": $danger-color,
    "warning": $warning-color,
    "info": $info-color,
    "light": $light-color,
    "dark": $dark-color,
    "muted": $muted-color,
    "lightgray": $lightgray-color,
);

// CSS Color Variables
:root {
    @each $name, $color in $colors {
        --color-#{$name}: #{$color};
    }
    --border-size: #{$border-size};
}

body {
    // Theme support
    --bubble: #{$light-color};
    --background: #eee;
    --navbar: #eeeeeedd;
    --text: #{$dark-color};
    --listOdd: #{darken($light-color, 5)};
    --listCouple: #{darken($light-color, 7)};
    --listBack: #{darken($light-color, 10)};
    --fields: #{$light-color};

    &[dark="1"] {
        // Dark mode!
        --bubble: #{darken($muted-color, 4)};
        --background: #111;
        --navbar: #111d;
        --text: #{$light-color};
        --listOdd: #{darken($dark-color, 5)};
        --listCouple: #{darken($dark-color, 7)};
        --listBack: #{$dark-color};
        --fields: #{$dark-color};
    }
}