Change text color dynamically when background changes (javascript)

Question

I have an image slider with text overlayed on it. I want to change the text color to either black or white depending on the theme of the image (light or dark).

I would like to manually specify the theme of the image as I don't want to over-complicate things. So for example it could work like this:

If imagetheme == 'light'
textcolor == #000

...and vice versa.

It's very hard to say anything without seeing the code for the slider. — JJJ
– JJJ, Commented Jun 30, 2012 at 15:09
I'm using anything slider with a modified style sheet: css-tricks.com/anythingslider-jquery-plugin — Emmanuel
– Emmanuel, Commented Jun 30, 2012 at 15:15

Ry- · Accepted Answer · 2012-06-30 15:10:34Z

2

Have a stylesheet that reacts to theme classes placed on the <body> element (e.g. .light). No mess.

answered Jun 30, 2012 at 15:10

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Emmanuel Over a year ago

I don't really follow. Basically, I want the image slides to have some sought of tag or property where I can specify the theme of the image (light or dark) and then when a new slide is activated, the text color changes based on the theme inputted.

Ry- Over a year ago

@Emmanuel: Here's a demo. You can easily apply it to a particular element, as opposed to <body>.

Jay Stewart · Accepted Answer · 2012-06-30 15:16:12Z

0

I think you have almost written it yourself! I would do..

if ( var imagetheme == 'light' ) {
  var textcolor = '#000';
}
else if { var imagetheme == 'dark' ) {
  var textcolor = '#fff';
}

Or you could write it with Javascript's Ternary operator..

var imagetheme == 'light' ? var textcolor = '#000' : var textcolor = '#fff';

answered Jun 30, 2012 at 15:16

Jay Stewart

335 bronze badges

1 Comment

Ry- Over a year ago

None of those are syntactically valid.

Collectives™ on Stack Overflow

Change text color dynamically when background changes (javascript)

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related