Is it possible to set a color based on the lightness/darkness of a less variable?
Currently I have the following code:
li {
color: darken(@bodyBackground, 10%);
}
This works providing @bodyBackground
is a light color. However if it was a dark color I'd like to use lighten(@bodyBackground, 10%)
. Is this possible with LESS?
There's contrast
function, e.g.:
li {
color: contrast(@bodyBackground,
lighten(@bodyBackground, 13%),
darken(@bodyBackground, 13%));
}
You can be much smarter than this. You can make a mixin to check the provided color, and perform either a darken or lighten depending on its color:
.smart-text-color (@a) when (lightness(@a) >= 50%) {
// Its a light color return a dark output
color: darken(@a, 60%);
}
.smart-text-color (@a) when (lightness(@a) < 50%) {
// Its a dark color return a dark output
color: lighten(@a, 60%);
}
Here is an example mixin, that takes the background color as the variable, and works out what text color to use. Returning either a light or dark output.
http://codepen.io/TristanBrotherton/pen/GwIgx?editors=110
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With