jquery - 使用 LESS 和 jQuery 根据背景颜色切换正文颜色？

Question

我有一个很好的脚本，可以让您更改网站的背景颜色。由于我使用较少的 CSS，因此我能够调整网站不同部分的颜色。例如:

@bgcolor: #bad2e3;

body {
    background-color: @bgcolor;
}
.section {
    background-color: (darken(@bgcolor,10%);
}

当用户选择背景颜色时，我只需调用 less.refreshStyles(); 即可，效果很好。

我的问题是我需要根据背景颜色更改正文。例如，深色背景需要浅色正文文本，反之亦然。

我可以将其编码到 CSS 中，但这意味着为每种可能的背景颜色指定正文文本颜色。

是否有一个函数，可以使用 LESS 中提供的颜色函数，也可以使用 jQuery，让我可以检测背景颜色的暗度并在必要时更改正文文本颜色？

例如，0to255.com根据背景颜色显示浅色/深色文本。

Answer 1

这将返回您 body 的背景颜色:

document.body.style.backgroundColor

编辑:抱歉误解了这个问题。在此链接中get color contrast你有一个在 javascript 中检测颜色对比度的函数:

function getContrastYIQ(hexcolor){
    var r = parseInt(hexcolor.substr(0,2),16);
    var g = parseInt(hexcolor.substr(2,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'light' : 'dark';
}