Conditional CSS based on background color variable

Question

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?

See contrast function.

seven-phases-max
– seven-phases-max

2014-02-06 11:02:30 +00:00
Commented Feb 6, 2014 at 11:02 — seven-phases-max
– seven-phases-max, Commented Feb 6, 2014 at 11:02
Yes, that does it. Can you add it as an answer please.

Ben Foster
– Ben Foster

2014-02-06 11:13:09 +00:00
Commented Feb 6, 2014 at 11:13 — Ben Foster
– Ben Foster, Commented Feb 6, 2014 at 11:13

Dave Anderson · Accepted Answer · 2016-02-25 08:57:13Z

14

There's contrast function, e.g.:

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

edited Feb 25, 2016 at 8:57

Dave Anderson

12.4k4 gold badges60 silver badges80 bronze badges

answered Feb 6, 2014 at 11:18

seven-phases-max

11.9k1 gold badge47 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tristan Brotherton · Accepted Answer · 2014-10-17 23:49:01Z

6

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

answered Oct 17, 2014 at 23:49

Tristan Brotherton

2,5917 gold badges32 silver badges39 bronze badges

3 Comments

seven-phases-max Over a year ago

And how is it smarter than contrast function?

gco Over a year ago

It's much smarter since you can adjust multiple properties at once.

seven-phases-max Over a year ago

@gco, so you simply hardcode your mixin to a particular property set and then have to copy-paste the same code for each new set of properties? With each property duplicated? And how is this smarter?

Collectives™ on Stack Overflow

Conditional CSS based on background color variable

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related