How to invert colors in LESS

In LESS, reversing colors can be achieved by using built-in color operation functions, which is particularly suitable for scenarios requiring dynamic theme changes or implementing dark mode.

LESS provides various color functions, including spin, saturate, lighten, darken, which help adjust colors, while the contrast function can be directly used to reverse colors.

Example: Using contrast Function

Basic syntax is as follows:

less
contrast(@color, @dark, @light, @threshold);

• @color is the base color to reverse.
• @dark is the color used for darker results (optional, defaulting to #000000, i.e., black).
• @light is the color used for lighter results (optional, defaulting to #ffffff, i.e., white).
• @threshold is the color threshold used to determine whether the color should be lightened or darkened (optional, defaulting to 0.43).

Practical Application:

Suppose we are designing a webpage that includes a button, and when the user selects dark mode, the button's color needs to be reversed.

less
@button-color: #428bca; // Bootstrap button blue

.button {
  background-color: @button-color;
  color: contrast(@button-color);
}

// Dark mode reverses color
.night-mode .button {
  background-color: contrast(@button-color);
  color: @button-color;
}

In this example, the button's default color is a bright blue. When dark mode is applied, we use the contrast function to set the background color to the contrasting color, and the text color becomes the original background color, achieving color reversal.

Conclusion

Using the contrast function is a quick and effective way to reverse colors, especially for features like dark mode. It not only automatically selects the appropriate color based on brightness but can also optimize contrast by adjusting the threshold. Of course, we can combine it with other color functions to further adjust the reversed colors for optimal visual effects.