Использование LESS & JQuery для переключения цвета основного текста в зависимости от цвета фона? - PullRequest
Новая
       11

Использование LESS & JQuery для переключения цвета основного текста в зависимости от цвета фона?

2 голосов
/ 07 ноября 2011

У меня есть хороший скрипт, который позволяет менять цвет фона сайта.Поскольку я использую LESS CSS, я могу настроить цвет различных разделов сайта.Например: 

@bgcolor: #bad2e3;

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

Когда пользователь выбирает цвет фона, я могу просто позвонить less.refreshStyles();, и это прекрасно работает.

Моя проблема в том, что основной текст должен зависеть от измененияна цвет фона.Например, темный цвет фона требует светлого основного текста, и наоборот.

Я мог бы кодировать это в CSS, но это означало бы указание цвета основного текста для каждого возможного цвета фона.

Существует ли функция, использующая функции цвета, доступные в LESS, или использующая jQuery, где я могу обнаружить темный цвет фона и при необходимости изменить цвет основного текста?

Например, 0to255.com показывает светлый / темный текст в зависимости от цвета фона.

Ответы [ 4 ]

4 голосов
/ 10 мая 2013

Как сказал Фернандо, вы должны рассчитать 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);
}

Надеюсь, это поможет.

4 голосов
/ 07 ноября 2011

Возвращает цвет фона вашего тела: 

document.body.style.backgroundColor

Редактировать: Извините, что неправильно понял вопрос. В этой ссылке получить цветовой контраст у вас есть функция для определения контрастности цвета в 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';
}
2 голосов
/ 07 января 2013

Другой альтернативой является Guards особенность LESS

Охранники полезны, когда вы хотите сопоставить выражения, в отличие от простых значений или арности. Если вы знакомы с функциональным программированием, вы, вероятно, уже сталкивались с ними.

Это более или менее симметрично, если / иначе условия, поэтому используйте что-то вроде этого (взято из официального источника LESS): 

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

У вас могут быть преимущества динамической генерации CSS, и, что более важно, сохраняйте код более согласованным

1 голос
/ 07 ноября 2011

Вы, вероятно, просите цветовой контраст. Некоторое время назад для этого был хороший учебник по PHP, возможно, вы можете абстрагировать его в JavaScript: http://www.splitbrain.org/blog/2008-09/18-calculating_color_contrast_with_php

...