Changing Text Color Based on Background

Ask the community
1

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 it possible to do it through code？

2

Hi! Yes, you can add onViewportEnter/Leave events for the first section or any element inside of it that will trigger the color changes:

Here is a code, make sure to place it inside the onReady function and change/add IDs and color values:

//----- Top of the Page Position -----//
$w ( ‘#firstSection’ ). onViewportEnter (() => {
$w ( ‘#headerBackgroundContainer’ ). style . backgroundColor = “black” ;
$w ( ‘#textButton’ ). style . color = “white” ;
$w ( ‘#backgroundButton’ ). style . backgroundColor = “#384AD3” ;
$w ( ‘#logo’ ). src = “https://static.wixstatic.com/shapes/c164a8_fbd74c53bd8246968df000247c266b87.svg”
})
//-----------//

//-----  The Rest of the Page Positions  -----// 
$w ( '#firstSection' ). onViewportLeave (() => { 
    $w ( '#headerBackgroundContainer' ). style . backgroundColor  =  "white" ; 
    $w ( '#textButton' ). style . color  =  "black" ; 
    $w ( '#backgroundButton' ). style . backgroundColor  =  "red" ; 
    $w ( '#logo' ). src  =  "https://static.wixstatic.com/shapes/c164a8_41aeca6d6c7940838e6d9dac36630bda.svg" 
}) 
//---------//

A couple of things to keep in mind:

  1. Use stretched container as a background for your header
  2. Use buttons (as I’m doing in my example) or linked text elements instead menu component
  3. In the editor set the colors that are going to be visible on the top of the page (to prevent another colors to be visible at the beginning, before your code starts to run)
  4. For the logo: you can change source, but not color, so create two versions of it using the colors you need and then upload them and copy their urls (to found the url of the local images go to the media manager, see the attached screenshot)