Changing Text Color Based on Background

Ask the community
,
1

Hi!

If I have a header with a transparent background, can I make it so that the content/text within the header changes color based on the background? For example, I want it so that if the header is on a dark background, the text is white, and if it’s on a light background, the text is black. Is this possible through Velo or regular Wix features?

Thank you so much!
~Henry

2 
let myElementsBGcolor = $w('#YourElementsIDhere').style.backgroundColor

Get first the color of your element.
Then do some if-else-queries to chnage corresponding elements color.

if () {    }
else {   }

if (myElementsBGcolor==="red") { if yes, do something here }
else { if not, do something here }

-Perhaps you also will have to convert the color first to the right format.

3

Thank you so much!!!

4

I just tried this and it unfortunatly didn’t work for me (Editor X). Did it work for you @Henry? @russian-dima could you please help me out? When I check in the consol log the background color for transparent objects is undefined.
What do you mean by “Perhaps you also will have to convert the color first to the right format.”?

Thank you so much!

5

What exactly did you tried? Where is your current code?
As i can remember, you have first to set-up your TRANSPARENT-Element and make it → NON-TRANSPARENT (giving it 100% color) in the property-panel first.

Than immediately set the OPACITY to → 0 <— again by CODE using RGBA.

$w('#myButtonIDhere').style.backgroundColor = "rgba(0, 0, 255, 0)";  //<-100%-opacity
$w('#myButtonIDhere').style.backgroundColor = "rgba(0,0,255,0.1)";  //<--90%-opacity
$w('#myButtonIDhere').style.backgroundColor = "rgba(0,0,255,1)";    //<-- 0%-opacity

Try it out.

6

@russian-dima

So I’ve got some text in a text input object - the object background is transparent and by default the text in the object is white. Most of the website has black background, so in general it looks like this:

The object is fixed in a position and as we scroll down in the page, in some areas, the page background is white so you can’t see the white text.

Now I’m trying to find a way that the text input object parses the color that is beneath it and changes the text color accordingly.

I tried:

let myElementsBGcolor = $w('#input6').style.backgroundColorif (myElementsBGcolor==="black") { $w('#input6').style.color = "white" }else { $w('#input6').style.color = "black" }
console.log(myElementsBGcolor)

When I log my Elements Background Color the consol shows: “undefined”.

I also tried your idea of setting the Background color of the transparent object to 100% color and then changing the opacity, but when I do and add:

$w('#input6').style.backgroundColor ="rgba(0,0,255,1)";//<-- 0%-opacity

it just displays a blue background. But the text color still doesn’t change.

Thanks

7

@beratung

  1. First → Check if → an INPUT-elements supports → “style.background” !?
  2. When your INPUT-element is fixed and the background is moving, than, perhaps you can get the right scrollposition of your page.
    Then you will be able to know, when to change to black or white (dark or bright).

Also another possible situation could be by using → “onVieportEnter/Leave”

Also take attention, that when an element do not support → style.background,
you could do it by using the html-format like this one …

$w('myElement').html = <p style = "color:"white">My Text here....</p>

…or…

<font style = "color:"black">${originalString}</font>