contrast()是Less内置的智能反色函数，根据背景明度自动选择深色或浅色基准值确保可读性，典型用法为contrast(@bg-color, @dark-color, @light-color, @threshold)，不支持transparent或未定义变量，旧版Less需注意兼容性。
Less里用contrast()函数做颜色反转最直接
深色模式下需要把文字从黑变白、图标从灰变亮，但手动维护两套颜色值容易出错。contrast()是Less内置的“智能反色”函数，它不简单取反RGB，而是根据背景色明度自动选lighten()或darken()后的安全色，输出结果始终可读。
典型用法：contrast(@bg-color, @dark-color, @light-color, @threshold)。前两个参数是输入背景色和你定义的“深色基准”，后两个是“浅色基准”和明度阈值（默认0.43）。比如contrast(#333, #000, #fff)返回#fff，而contrast(#eee, #000, #fff)返回#000。
常见错误：传入transparent或未定义变量导致编译失败；阈值设太高（如0.8）会让本该变白的文字仍用黑字，对比度不足。
为什么不用invert()？它不适合UI适配
invert()是CSS滤镜函数，作用在渲染层，不是Less编译期逻辑——它不能用于生成新变量、不能参与计算、无法配合fade()或saturate()链式调用。更重要的是，invert(100%)对灰色#888输出#777，视觉上几乎没变化，完全达不到“深浅适配”的目的。
真实场景中，你需要的是语义化反色：深底配浅文，浅底配深文。contrast()基于HSL明度判断，invert()只是数学翻转，二者解决的问题根本不同。
如果你看到别人用invert()做主题切换，基本可以判定是运行时JS补丁，不是Less原生方案。
结合lighten()/darken()微调对比度
contrast()给出的是安全底线色，但有时太“保守”：比如背景是#1a1a1a，它返回#fff，但#f0f0f0可能更柔和；背景是#f9f9f9，它返回#000，但#333更友好。这时要手动干预：
- 先用
contrast()拿到基础反色 - 再用
lighten(@color, 5%)或darken(@color, 8%)微调亮度 - 避免直接
spin()改色相——文字颜色不需要偏蓝或偏黄
示例：
@text-on-dark: lighten(contrast(#222, #000, #fff), 3%);
比纯白更耐看，又保持足够对比度。
注意contrast()在旧版Less中的兼容性
Less 3.5+才完整支持contrast()四参数形式；3.0–3.4只支持三参数（无@threshold），且阈值固定为0.43；低于3.0版本不支持该函数，会报错Operation on an invalid type。
检查方式：在命令行运行lessc --version；项目中若用Webpack less-loader，需确认其封装的Less版本。降级方案只能用luma()手动算明度再条件判断，代码冗长且易错。
真正麻烦的不是函数本身，而是团队成员本地Less版本不一致导致编译结果不同——建议把less和less-loader版本锁死在package.json中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
