Utilisation de LESS & jQuery pour changer la couleur du texte du corps en fonction de la couleur d'arrière-plan?

Question

J'ai un bon script qui vous permet de changer la couleur d'arrière-plan d'un site. Comme j'utilise moins de CSS, je suis capable d'ajuster la couleur des différentes sections du site. Par exemple:

@bgcolor: #bad2e3; 

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

Lorsqu'un utilisateur choisit une couleur d'arrière-plan, je peux simplement appeler less.refreshStyles(); et cela fonctionne très bien.

Mon problème est que j'ai besoin de changer le texte du corps en fonction de la couleur de fond. Par exemple, une couleur de fond sombre nécessite un texte de corps léger, et vice versa.

Je pourrais coder ceci dans le CSS, mais cela signifierait spécifier une couleur de corps pour chaque couleur d'arrière-plan possible. Y at-il une fonction, soit en utilisant les fonctions de couleur disponibles dans LESS, ou en utilisant jQuery, où je peux détecter l'obscurité de la couleur d'arrière-plan et changer la couleur du corps du texte si nécessaire? A titre d'exemple, 0to255.com montre un texte clair/foncé en fonction de la couleur d'arrière-plan.

Answer 1

Cela renvoie la couleur de fond de votre corps:

document.body.style.backgroundColor 

Edit: Désolé missunderstood la question. Dans ce lien get color contrast vous avez une fonction pour détecter le contraste d'une couleur en 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'; 
} 

Answer 2

Vous demandez probablement le contraste des couleurs. Il y avait un tutoriel PHP pour que il y a un moment, peut-être vous pouvez abstraire JavaScript: http://www.splitbrain.org/blog/2008-09/18-calculating_color_contrast_with_php

Answer 3

Autre alternative est Guards caractéristique MOINS

gardes sont utiles lorsque vous voulez faire correspondre des expressions, comme opposés aux valeurs simples ou à l'arité. Si vous connaissez la programmation fonctionnelle, vous les avez probablement déjà rencontrés.

qui est plus ou moins Simular si/conditions d'autre afin d'utiliser quelque chose comme ceci (extrait de source officielle MOINS):

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

Vous pourriez avoir des avantages de la génération de CSS dynamique, et ce qui est plus important code donjon Comme l'a dit Fernando, vous devez calculer YIQ

Answer 4

est ici une fonction (MOINS) que j'utilisées à cette fin:

.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); 
} 

Utilisation:

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

Hope this helps.