How to invert colors in LESS

Question

Is there a particular color operation I'm not seeing where you can invert colors? I'm seeing lots of color methods but could not see a way to do this.

reference:

http://lesscss.org/

Answer 1

There are multiple interpretation of inverting color.

• You want a color with the opposite hue:

  spin(@color, 180)

• You want a color that the sum with current one is white:

  #fff - @color

Answer 2

I don't think there is a specific function to invert colors, but what you could do is set your colors as variables. e.g.:

@color1: #666;
@color2: #fff;

body {
background-color: @color1;
color: @color2;
}

h1 {
color: @color2;
}

Then, simply make an alternate stylesheet with the inverted colors set to the variables used in the primary stylesheet. As long as you use the variables throughout the css, those color will be inverted.