CODEWITHSUNDEEP
javascripthtmlcss
Emmanuel
Emmanuel

Reputation: 162

Change text color dynamically when background changes (javascript)

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.

Upvotes: 0

Views: 706

Answers (2)

Jay Stewart
Jay Stewart

Reputation: 33

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

Upvotes: 0

Ry-
Ry-

Reputation: 224867

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

Upvotes: 2

Related Questions