$hue: 227deg;
$dark-gray-900: hsl(255, 100%, 100%) !default;
$dark-gray-800: hsl($hue, 12%, 84%) !default;
$dark-gray-700: hsl($hue, 12%, 78%) !default;
$dark-gray-600: hsl($hue, 12%, 64%) !default;
$dark-gray-500: hsl($hue, 12%, 50%) !default;
$dark-gray-400: hsl($hue, 12%, 38%) !default;
$dark-gray-300: hsl($hue, 12%, 16%) !default;
$dark-gray-200: hsl($hue, 12%, 12%) !default;
$dark-gray-100: hsl($hue, 12%, 8%) !default;

$dark-grays: ("100": $dark-gray-100,
"200": $dark-gray-200,
"300": $dark-gray-300,
"400": $dark-gray-400,
"500": $dark-gray-500,
"600": $dark-gray-600,
"700": $dark-gray-700,
"800": $dark-gray-800,
"900": $dark-gray-900) !default;

$dark-theme-colors: ("gray-100": $dark-gray-100,
"gray-200": $dark-gray-200,
"gray-300": $dark-gray-300,
"gray-400": $dark-gray-400,
"gray-500": $dark-gray-500,
"gray-600": $dark-gray-600,
"gray-700": $dark-gray-700,
"gray-800": $dark-gray-800,
"gray-900": $dark-gray-900) !default;

$dark-theme-colors-rgb: map-loop($dark-theme-colors, to-rgb, "$value") !default;

html[data-theme='dark']:root {

    @each $color,
    $value in $dark-grays {
        --#{$variable-prefix}gray-#{$color}: #{$value} !important;
    }

    @each $color,
    $value in $dark-theme-colors-rgb {
        --#{$variable-prefix}#{$color}-rgb: #{$value} !important;
    }

    --#{$variable-prefix}body-color: #{$dark-gray-700} !important;

    --#{$variable-prefix}body-color-rgb: #{to-rgb($dark-gray-100)} !important;
    --#{$variable-prefix}body-bg-rgb: #{to-rgb($dark-gray-100)} !important;
    --#{$variable-prefix}body-bg: #{$dark-gray-100} !important;
}


.color-toggle {
    cursor: pointer;
}
.dark-logo {
    display: block;
}

.light-logo {
    display: none;
}

.dropdown-menu {
    box-shadow: $box-shadow;
        a:not(.btn) {
            background-color: transparent;
            color: var(--#{$variable-prefix}gray-700);

            &:focus,
            &:hover {
                color: var(--theme-color);
                background-color: transparent;
            }
        }
}

html[data-theme='dark'] {
    .dark-logo {
        display: none;
    }

    .light-logo {
        display: block;
    }

    .dropdown-menu {
        background-color: var(--#{$variable-prefix}gray-200);

    box-shadow: none;
    }
}