Usage
high-contrast-color($bg, $light, $dark)
Parameters
$bg
(Required) (color) The color to determine a readable color for
Default: None
$light
(Optional) (mixed) The value to return if the background is dark
Default: #fff
$dark
(Optional) (mixed) The value to return if the background is light
Default: #000
Parameter Notes
The $bg color can be any valid CSS or Sass color such as red, #123456, rgb(123, 45, 210), etc.
Examples
Basic usage (consider using readable-color() function instead here)
.element {background: $primary_color; color: high-contrast-color($primary_color);}
Lighten a color if it is determined to be dark
$active_color: lighten($primary_color, 25%); //Lighten the color in case it is dark
@if high-contrast-color($primary_color, true, false) { //If the color is light
$active_color: $primary_color; //Use the original color since it is already light
}
Additional Notes
This function requires the linear channel value lookup table. For simple functionality (when only needing black and white return values) consider using the readable-color() function instead.
Source File
Located in /assets/scss/partials/_functions.scss on line 58.
@function high-contrast-color($bg, $light: #fff, $dark: #000){
$lightContrast: contrast($bg, $light);
$darkContrast: contrast($bg, $dark);
@if ( $lightContrast > $darkContrast ){
@return $light;
}
@return $dark;
}
Override
To override or disable this, redefine the mixin/function later on, or use different class names to prevent this from targeting your element.
@mixin high-contrast-color($bg, $light, $dark){
//Write your own code here, leave it blank, or return false.
}