CODEWITHSUNDEEP
less
Ben Foster
Ben Foster

Reputation: 34800

Conditional CSS based on background color variable

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?

Upvotes: 10

Views: 5848

Answers (2)

seven-phases-max
seven-phases-max

Reputation: 11820

There's contrast function, e.g.:

li {
    color: contrast(@bodyBackground,
            lighten(@bodyBackground, 13%),
             darken(@bodyBackground, 13%));
}

Upvotes: 14

Tristan Brotherton
Tristan Brotherton

Reputation: 2561

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

Upvotes: 6

Related Questions