less Color Operation Functions Setting text color depending on the darkness or lightness of background color
Example
#demo-element {
background: @theme-color;
color: contrast(@theme-color, black, white, 50%);
}
@theme-color: red;
The above example will set the text color of the element as white if the background-color is dark and vice-versa. This is achieved using the contrast() color operation function.
The contrast function accepts four parameters where the first one is the reference color based on which the output should be provided. A dark color that should be output when the reference color is light and a light that should be output when reference color is dark . Threshold is a percentage which defines when a color is considered as a light color and when dark.
A demo of this example can be found here.
