使用 LESS & jQuery 根据背景颜色切换正文颜色？答案

【问题标题】：Using LESS & jQuery to switch body text color dependent on background color?使用 LESS & jQuery 根据背景颜色切换正文颜色？
【发布时间】：2011-12-23 14:36:06
【问题描述】：

我有一个不错的脚本，可以让您更改网站的背景颜色。当我使用 LESS CSS 时，我可以调整网站不同部分的颜色。例如：

@bgcolor: #bad2e3;

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

当用户选择背景颜色时，我可以简单地调用less.refreshStyles(); 就可以了。

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

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

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

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

【问题讨论】：

当然可以，但我只是将其用作我所问问题的视觉示例。

标签： jquery css colors less

【解决方案1】：

这会返回你身体的背景颜色：

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';
}

【讨论】：

对不起，这不是我要问的。我已经可以获取并更改背景颜色。我想检测背景颜色有多深，并用它来检测是提供浅色还是深色正文
非常正确，您可以通过编辑来计算颜色的 YIQ

【解决方案2】：

正如费尔南多所说，你必须计算YIQ。

这是我用于此目的的 (LESS) 函数：

.getContrastYIQ(@color) when (iscolor(@color))
{
    .return_contrast_color(@yiq) when (@yiq >= 128) { color: #000; }
    .return_contrast_color(@yiq) when (@yiq < 128)  { color: #fff; }
    @r: red(@color);
    @g: green(@color);
    @b: blue(@color);
    @yiq: ((@r*299)+(@g*587)+(@b*114))/1000;
    .return_contrast_color(@yiq);
}

用法：

@bgcolor: #bad2e3;
body {
    background-color: @bgcolor;
    .getContrastYIQ(@bgcolor);
}

希望这会有所帮助。

【讨论】：

【解决方案3】：

其他选择是 Guards LESS 的功能

当你想匹配表达式时，守卫很有用，而不是简单的值或 arity。如果您熟悉函数式编程，您可能已经遇到过。

这或多或少是类似的 if/else 条件，所以使用这样的东西（取自官方 LESS 来源）：

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

您可以从动态 CSS 生成中获益，更重要的是保持代码更加一致

【讨论】：

【解决方案4】：

您可能要求颜色对比。前段时间有一个不错的 PHP 教程，也许你可以把它抽象成 JavaScript：http://www.splitbrain.org/blog/2008-09/18-calculating_color_contrast_with_php

【讨论】：