Thank You!

You’re in! So glad to have you here.

Color Palette Switcher Pro for Kadence — Documentation

Color Palette Switcher Pro — Documentation
Color Palette Switcher Pro
for Kadence · Documentation
 Buy License →

Documentation

Version 1.0.0 By Cre8tive Diva

Overview

Color Palette Switcher Pro adds a sleek sticky bar to the bottom of your Kadence-powered website that lets visitors switch between your color palette presets in real time — with a single click.

The plugin reads your palette colors directly and automatically from Kadence. There is no manual color entry required at any point. Set up your palettes in Kadence’s Customizer and the plugin detects them immediately.

Requirements

Before installing, make sure your site meets these requirements:

  • WordPress 5.8 or higher
  • PHP 7.4 or higher
  • Kadence theme (free or pro version)
  • An active license key from cre8tivediva.com

Installation

Automatic Installation

  1. Log in to your WordPress dashboard
  2. Go to Plugins → Add New → Upload Plugin
  3. Upload the zip file you received after purchase
  4. Click Install Now
  5. Click Activate Plugin
  6. Go to Settings → Palette Switcher Pro to configure

Manual Installation via FTP

  1. Unzip the plugin file on your computer
  2. Upload the color-palette-switcher-pro folder to /wp-content/plugins/
  3. Log in to your WordPress dashboard
  4. Go to Plugins and click Activate
  5. Go to Settings → Palette Switcher Pro to configure

License Activation

After activating the plugin you will see a license activation prompt. Enter the license key from your purchase confirmation email and click Activate.

Your license key is tied to the email address used at purchase. If you need to retrieve your key, visit cre8tivediva.com or contact support.

License TierSites
Single Site1
Freelancer5
Studio15
DesignerUnlimited

Setting Up Your Kadence Palettes

This step is only needed if you want to offer visitors more than one color scheme. The plugin works with however many palette presets you already have in Kadence — one, two, or three.

If you want to add additional palettes:

  1. Go to Appearance → Customize → Colors
  2. Switch to Palette 2, configure your colors, and click Publish
  3. Switch to Palette 3, configure your colors, and click Publish

The plugin will detect your palettes automatically — no further action needed.

Configuring the Plugin

Go to Settings → Palette Switcher Pro. You will see a confirmation message showing how many palettes were detected, along with a color swatch preview of each one.

Show bar on all pages

Check this to enable the switcher bar on every page of your site. The bar appears automatically — no shortcode needed.

Bar label text

The text that appears to the left of the palette buttons. Default is “View in Other Color Schemes”. Change to anything — for example “Available In 3 Colors!”

Button labels

Customize the name shown on each palette button. Replace the defaults with descriptive names like “Warm Neutrals”, “Dusty Rose”, or “Slate Blue”.

Newsletter Button (optional)

Enter a label and URL to add a newsletter signup button to the bar. Leave both fields blank to hide this button entirely.

Buy Button (optional)

Add a purchase CTA button to the bar. Examples: “Buy Charlotte”, “Buy This Theme”, “Get Savannah”. Leave blank to hide.

Click Save Settings then visit your site’s front end. The switcher bar slides up from the bottom smoothly on load.

Customizing the Appearance

All styles are in assets/css/cpsp-bar.css inside the plugin folder. Override any style without editing the plugin by adding CSS in Appearance → Customize → Additional CSS. All classes are prefixed with .cpsp- to avoid conflicts.

Change the bar label font
.cpsp-label {
    font-family: "Your Font", sans-serif;
}
Change the bar background color
#cpsp-bar {
    background: #2a2a2a !important;
}
Change the buy button color
.cpsp-cta-primary {
    background: #your-color !important;
}
Increase body padding if bar overlaps footer
body {
    padding-bottom: 120px !important;
}
Hide the bar label
.cpsp-label {
    display: none;
}

How It Works

When a visitor clicks a palette button the plugin applies all 15 Kadence color variables (--global-palette1 through --global-palette9 and beyond) instantly via JavaScript — no page reload required.

The selected palette is saved in the visitor’s browser localStorage under the key cpsp_palette so their choice persists as they navigate between pages.

The bar background automatically uses your active palette’s color slot 3 (--global-palette3) so it always stays on-brand when palettes switch.

Accessibility

Color Palette Switcher Pro is built with accessibility in mind and meets the following standards:

✓
Semantic Markup
The switcher bar is rendered as a <nav> element with an aria-label of “Color scheme switcher” so screen readers correctly identify its purpose.
✓
ARIA Roles and States
The palette buttons use role="group" with a descriptive label. Each button carries an aria-pressed attribute that updates to true when active, giving screen reader users clear feedback.
✓
Screen Reader Live Region
When a palette is switched, a hidden live region announces “Color scheme changed to [Name]” to screen reader users so they know the change took effect.
✓
Keyboard Navigation
All buttons are fully keyboard accessible. Users can tab to each button and activate it using the Enter key or Space bar — no mouse required.
✓
Focus Visible Styles
All interactive elements have custom focus-visible styles so keyboard users can clearly see which element is focused at all times.
✓
Decorative Element Handling
The aria-hidden="true" attribute is applied to decorative color swatch circles so screen readers skip non-informative content and focus on meaningful controls.
✓
Motion Sensitivity
The plugin respects the prefers-reduced-motion media query. Users with reduced motion enabled will not see the bar slide-in animation or button hover transitions.

Frequently Asked Questions

Does this work with the free version of Kadence?
Yes. The plugin works with both the free and pro versions of the Kadence theme.
Do I need to manually enter my colors anywhere?
Never. The plugin reads your colors automatically from Kadence every time a page loads. Update a color in Customize → Colors and the switcher reflects it immediately.
How many palettes does this support?
Up to 3, matching the number available in Kadence’s Customizer.
Will the visitor’s chosen palette persist across pages?
Yes. Their selection is stored in localStorage and applied automatically on every page load.
Does this work with caching plugins?
Yes. All palette switching happens client-side via JavaScript so caching does not affect it.
Does this work with Kadence child themes?
Yes. It reads from Kadence’s core palette option which is shared across parent and child themes.
The bar is overlapping my footer — how do I fix it?
Add this to Customize → Additional CSS and increase the value until content clears the bar:

body { padding-bottom: 120px !important; }
Can I change the bar background color?
Yes. The bar uses your active palette’s slot 3 color by default. To override it:

#cpsp-bar { background: #YOUR_COLOR !important; }
Can I use this on more than one site?
That depends on your license tier. Visit cre8tivediva.com for details on Single Site, Freelancer, Studio, and Designer licenses.

Troubleshooting

The bar is not appearing on my site
  • Make sure “Show bar on all pages” is checked in Settings → Palette Switcher Pro
  • Confirm your license is active (Settings → Palette Switcher Pro → Account)
  • Make sure the Kadence theme is active — the plugin requires Kadence to function
No palettes are being detected
  • Make sure you have at least one palette configured in Appearance → Customize → Colors
  • Click Save Settings in the plugin settings page to refresh palette detection
  • Confirm you are using the Kadence theme (free or pro)
Colors are not switching when I click a palette button
  • Check your browser console for JavaScript errors
  • Try deactivating other plugins temporarily to check for conflicts
  • Make sure your theme is not overriding Kadence’s CSS variables with hardcoded colors
The bar is covering my page content
  • Add body { padding-bottom: 120px !important; } to Customize → Additional CSS
  • Increase the value if needed
I lost my license key
  • Check your purchase confirmation email from Freemius
  • Visit cre8tivediva.com and log in to your account to retrieve your key
  • Contact support if you are still unable to locate it

Support

Support is available to customers with an active license. We aim to respond within 2 business days.

✓ What’s Covered
  • Installation and activation help
  • Configuration questions
  • Bug reports
✗ Not Covered
  • Custom development or code modifications
  • Third-party plugin or theme conflicts
  • General WordPress or Kadence support

Need help?

Get in touch and we’ll respond within 2 business days.

Contact Support →

Changelog

v1.0.0
  • Initial release
  • Fully automatic palette detection from Kadence — no manual color entry
  • Reads all 3 palette presets automatically
  • Sticky bottom bar with smooth slide-up animation
  • Live CSS variable switching for all 15 palette slots
  • localStorage persistence across page loads
  • Two optional CTA buttons (newsletter + buy)
  • External stylesheet for easy customization
  • Screen reader live region announces palette change
  • Fully accessible — ARIA labels, keyboard navigation, focus-visible styles
  • prefers-reduced-motion support
  • Settings page with palette detection status and color swatch preview

Privacy

This plugin stores the visitor’s selected palette in their browser’s localStorage under the key cpsp_palette. This data never leaves the visitor’s browser and is never transmitted to any server. No personal data is collected or shared by this plugin.

For full details see our Privacy Policy and Terms of Service.