Consent Pro V2- Change Toggle Color (Is Active)

Finsweet Components
1

Description

I am trying to change the color of the is-active toggle button (currently green). I cannot make this change based on the ConsentPro template. I need direction on where to find this and change it.

Screenshot 2026-03-25 at 3.42.43 PM
Screenshot 2026-03-25 at 3.42.43 PM1462×955 292 KB

Site URL

Required: Please provide a staging/production URL where we can see the issue

Steps to Reproduce

  1. go to Manage Preferences
  2. Toggle to ACTIVE
  3. Green is represented as ACTIVE
    …

Expected Behavior

  1. go to Manage Preferences
  2. Toggle to ACTIVE
  3. BLUE is represented as ACTIVE

Actual Behavior

  1. go to Manage Preferences
  2. Toggle to ACTIVE
  3. Green is represented as ACTIVE

Video/Screenshots

Required: Please provide a short screen recording showing the issue

Additional Context

  • Browser: [e.g., Chrome 120, Safari 17]
  • Device: [e.g., Desktop, iPhone 14]

NDA Notice: If you’re under an NDA, please feel free to send us a Direct Message/Email with the above information.

2

Hey @amyhynes!

Based on your HTML structure, the toggle uses the .consent_prefs_checkbox-toggle class and the .is-active state class. Here’s what we’d recommend trying:

Option 1: Using Webflow Style Panel

  1. In Webflow Designer, select the toggle element (.consent_prefs_checkbox-toggle)
  2. In the Style panel, add a combo class by clicking the “+” next to “States” and selecting or creating the is-active state
  3. With the is-active state selected, change the Background Color to your desired blue
  4. Publish and test by toggling the switch in Manage Preferences

Option 2: Custom CSS Fallback

If the Style panel approach doesn’t persist (sometimes dynamic state changes need extra help), add this custom CSS:

.consent_prefs_checkbox-toggle.is-active {
  background-color: [your-desired-color] !important;
}

You can add this in an Embed element on your page or in your site’s Custom Code section (Site Settings > Custom Code > Head Code).

Replace [your-desired-color] with your blue hex code (e.g., #0000FF or your brand blue).

Let us know how it goes! If neither approach works, we’ll get our team to take a closer look at your specific setup :flexed_biceps: