0

let's say, I have a calendar - every entry is having a different background color (one color per user). There are light and also dark background colors, for the user is able to chose his favorite color. Now I'd like to set the text color fitting the background style. Where and how would I start? Thank you in advance.

hakre
  • 193,403
  • 52
  • 435
  • 836
user1385890
  • 21
  • 2

2 Answers2

2

If you are looking for a case by case solution, you could do something like this:

$("#Calendar .day").each(function() {
    var $this = $(this);

    //If the background color is black - set text color to white.
    if($this.css("background-color") == "#000000") {
        $this.css("color", "#FFFFFF");
    }

    //A bunch more if statements

});

ALSO

To make it easier, you could find the complementary color using this code:

JS function to calculate complementary colour?

Community
  • 1
  • 1
Mikey G
  • 3,473
  • 1
  • 22
  • 27
0

You might try just taking a bitwise inverse of the selected color.

I think this snippet (in JavaScript) will do the trick. 

var RGB_Value = "ffaacc" //set this var to the hex value the user selected 
var colorNum = parseInt(RGB_Value, 16); // assume radix of 16 (hex) and convert string to number 
var inverseColor = ~colorNum; //bitwise inverse of the number 
var RGB_Inverse = nMyNumber.toString(16); //convert the number into a hex string
Joe
  • 800
  • 4
  • 15
  • Sounds good - let me get a little deeper: I am working in Joomla, using a component called DP Calendar. I am also using Community Builder where I have the member profiles listed - one profile field is for setting the background color - I just added a second one for the text color value. The fields value is called into DP Calendar - so the snippet will still work? I am not very well in JS - for PHP and CSS is a little closer to me. But thanks this far. – user1385890 Jun 15 '12 at 21:47
  • You should be able to do something functionally similar on the PHP side; the trick is just to make sure that the RGB components of the color are being treated as a number rather than a string, then do a bitwise inverse. It'll get you an INVERSE color, not a complementary color. I'm not a designer, so I don't know how much the distinction matters :) – Joe Jun 15 '12 at 22:12
  • Well, actually there is not a difference between :) – user1385890 Jun 15 '12 at 22:25