How can I implement a plugin to invert the colors of my logo and menu button in Webflow based on the background color of my slider, in real time and without manual intervention?

To dynamically invert your logo and menu button colors in Webflow based on the background of a slider (e.g. light vs dark slide), you’ll need to use a small custom script that detects each slide’s background and adjusts the color styles in real time.

1. Prepare Your Elements and Classes

• Assign unique classes (or IDs) to your logo and menu button, such as .site-logo and .menu-button.
• Each slider slide should have a class (e.g., .slider-slide) and a background color or an identifying attribute for color contrast logic.
• For example, you could add a custom data attribute to each slide like data-theme="dark" or data-theme="light".

2. Add Custom Data Attributes to Slides

• Go to each slide element, and in the Element Settings panel, add a Custom Attribute:
• Name: data-theme
• Value: dark or light, depending on the contrast needed for your UI elements.

3. Add Custom Script for Theme Switching

• Go to Page Settings or the Before </body> tag section in Project Settings > Custom Code.
• Add the following script using inline references (no code block):

Description of the logic:

• Listen for the Webflow slider change event.
• Check the data-theme value of the target slide.
• Add or remove a class like .invert on logo/menu button to change their styles.

Example script:

• Add this inside a <script> tag:

`document.addEventListener('DOMContentLoaded', function () {

  const slider = document.querySelector('.w-slider');

  const logo = document.querySelector('.site-logo');

  const menu = document.querySelector('.menu-button');

  function updateTheme() {

    const activeSlide = slider.querySelector('.w-slider-mask > .w-slide[aria-hidden="false"]');

    if (!activeSlide) return;

    const theme = activeSlide.getAttribute('data-theme');

    if (theme === 'dark') {

      logo.classList.add('invert');

      menu.classList.add('invert');

    } else {

      logo.classList.remove('invert');

      menu.classList.remove('invert');

    }

  }

  // Initial check

  updateTheme();

  // Re-check on each slide change

  slider.addEventListener('slide.bs.carousel', updateTheme);

  const observer = new MutationObserver(updateTheme);

  observer.observe(slider, { childList: true, subtree: true, attributes: true });

});`

4. Style the Inverted State in Webflow

• Add CSS under Project Settings > Custom Code > Inside <style> tags or through custom embed component.
• Define a class like .invert:
• For example:
  • .invert { filter: invert(1); } or
  • .invert { color: #fff; fill: #fff; } depending on the element type.
• Make sure vectors (SVGs) or icons are set up to respond to fill or filter changes.

5. Test Slide Transitions

• Preview your project and navigate through the slides.
• Confirm that when a slide with data-theme="dark" is active, your logo and menu button respond accordingly.

Summary

To invert your logo and menu button in Webflow based on your slider's background in real time, use data attributes (like data-theme) on slides and a custom script that adds or removes an .invert class based on the active slide. This ensures dynamic, automatic inversion without manual updates.