Last active
December 21, 2015 08:59
-
-
Save gavinmcfarland/6282267 to your computer and use it in GitHub Desktop.
A selection of functions that help create contrasting colours.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ////////////////////////////////////////////////////////////// | |
| // Dark // | |
| ////////////////////////////////////////////////////////////// | |
| // Checks to see if a colour is dark. The threshold defaults | |
| // to 20% if not set. | |
| // Usage: dark($color, [$threshold]) | |
| @function dark($color, $threshold: 20%) { | |
| @if lightness($color) < $threshold { | |
| @return true; | |
| } | |
| @else { | |
| @return false; | |
| } | |
| } | |
| ////////////////////////////////////////////////////////////// | |
| // Contrasted // | |
| ////////////////////////////////////////////////////////////// | |
| // Creates a contrasting colour depending on whether or not | |
| // it is a dark colour. If mono is set to true, then it | |
| // returns white or black. | |
| // Usage: contrasted($color, [$ammount], [$mono]) | |
| @function contrasted($color, $ammount: 10%, $mono: null) { | |
| @if dark($color) { | |
| @if $mono == true { | |
| @return white; | |
| } | |
| @else { | |
| @return lighten($color, $ammount); | |
| } | |
| } | |
| @else { | |
| @if $mono == true { | |
| @return black; | |
| } | |
| @else { | |
| @return darken($color, $ammount); | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You could do the
darkfunction in one line: