Skip to content

Instantly share code, notes, and snippets.

@lewismcarey
Last active July 1, 2018 16:15
Show Gist options
  • Save lewismcarey/b7f9e546202357b2f7c8 to your computer and use it in GitHub Desktop.
Save lewismcarey/b7f9e546202357b2f7c8 to your computer and use it in GitHub Desktop.
sass function set contrasting font color based on background
// contrasting font color
@function set-font-color($color, $dark: #000, $light: #FFF) {
// return $dark or $light color depending on lightness of $color
@return if(lightness($color) > 50, $dark, $light);
}
$color: #0000FF;
.default {
background-color: $color;
color: set-font-color($color);
}
.custom {
background-color: $color;
color: set-font-color($color, #BADA55, #FACE0F);
}
.default {
background-color: #0000FF;
color: #FFF;
}
.custom {
background-color: #0000FF;
color: #FACE0F;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment