Block Theme Color Switcher
🎨 Unleash Your Theme’s True Colors! WordPress Block Themes (Full Site Editing) are powerful, often coming with multiple style variations defined in theme.json . However, usually, you select one style in the editor, and that’s what visitors see. Block Theme Color Palette Switcher breaks this limitat
🎨 Unleash Your Theme’s True Colors!
WordPress Block Themes (Full Site Editing) are powerful, often coming with multiple style variations defined in theme.json . However, usually, you select one style in the editor, and that’s what visitors see.
Block Theme Color Palette Switcher breaks this limitation. It parses your theme’s theme.json and style variations (inside the /styles folder) to automatically generate a floating font-end menu.
Test with WordPress Playground
🚀 Who is this for?
- 👨💻 For Theme Developers: Stop creating multiple demo sites for different color schemes! Install this plugin, and let your potential customers preview every single color palette your theme offers on a single demo site.
- 👤 For Site Visitors: Give your users control. Let them choose a look that suits their mood or accessibility needs (e.g., High Contrast vs. Pastel).
✨ Key Features
- 🔌 Plug & Play: Automatically detects palettes from theme.json and styles/*.json files. No manual configuration needed.
- 💾 Persistent Selection: Uses Browser Storage (LocalStorage) to remember the user’s choice. If they leave and come back, their selected color palette remains active!
- ⚡ Instant Preview: Changes CSS variables on the fly. No page reloads required.
- 🛠️ Customizable UI: Change the trigger button text.
- Position the button (Left/Right).
- Adjust vertical spacing to avoid conflict with other chat widgets or buttons.
🧹 Clean Reset: Includes a “Reset” button to revert to the theme’s default colors instantly.
🔧 How it Works
- 01The plugin scans your active Block Theme.
- 02It extracts color definitions from settings.color.palette .
- 03It creates a sleek off-canvas menu on the frontend.
- 04When a user clicks a color, the plugin updates the CSS Custom Properties (Variables) on the <body> tag instantly.
