Jump to content

how do I dynamically invert my logo and menu bar so that on darker backgrounds it inverts to white

Recommended Posts

how do I dynamically invert my logo and menu bar so that on darker backgrounds it inverts to white , the collection id is #collection-64f9b6cdca08bb7aeb28959f

i've tried using css ; 

/* Initial style for the section to be inverted */
#collection-63f4ddb26d6f7d40320b67ac {
  background-color: white; /* Set the default background color */
  transition: filter 0.3s ease; /* Add a smooth transition for the filter effect */
}

/* Additional styling to customize the appearance of the inverted section */
#collection-63f4ddb26d6f7d40320b67ac.inverted {
  -webkit-filter: invert(100%);
  filter: invert(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(invert='1');
}
 and javascriipt

// Function to check the darkness of a color
function isDarkColor(hexColor) {
  const r = parseInt(hexColor.slice(1, 3), 16);
  const g = parseInt(hexColor.slice(3, 5), 16);
  const b = parseInt(hexColor.slice(5, 7), 16);
  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
  return brightness < 128;
}

// Function to apply the inversion based on background color
function applyInversion() {
  const sectionBelow = document.querySelector('.section-below'); // Replace with the actual class or ID of the section below
  const invertSection = document.querySelector('.invert-section');

  if (sectionBelow) {
    const backgroundColor = getComputedStyle(sectionBelow).backgroundColor;
    const isSectionBelowDark = isDarkColor(backgroundColor);

    if (isSectionBelowDark) {
      invertSection.classList.add('inverted');
    } else {
      invertSection.classList.remove('inverted');
    }
  }
}

// Call the applyInversion function when the page loads and on window resize (in case the section size changes)
window.addEventListener('load', applyInversion);
window.addEventListener('resize', applyInversion);

 

Edited by Oliokd123
spelling
Link to comment
  • 4 months later...
  • Replies 1
  • Views 2.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.