Front-end color palette switcher for Block Themes. Let users pick styles instantly. Perfect for theme demos & developer showcases.

manojtd

Theme Tweaker

Theme Tweaker lets you modify the colors in your theme with no CSS/PHP editing.

Kadim Gültekin

🎨 Unleash Your Theme’s True Colors!
WordPress Block Themes (Full Site Editing) are powerful, often coming with multiple style variations defined in <code>theme.json</code>. 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 <code>theme.json</code> and style variations (inside the <code>/styles</code> folder) to automatically generate a floating font-end menu.
<a href="https://playground.wordpress.net/?plugin=block-theme-color-switcher" rel="nofollow ugc">Test with WordPress Playground</a>
<h3>🚀 Who is this for?</h3>
<ul>
<li>👨‍💻 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.</li>
<li>👤 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).</li>
</ul>
<h3>✨ Key Features</h3>
<ul>
<li>🔌 Plug & Play: Automatically detects palettes from <code>theme.json</code> and <code>styles/*.json</code> files. No manual configuration needed.</li>
<li>💾 Persistent Selection: Uses Browser Storage (LocalStorage) to remember the user’s choice. If they leave and come back, their selected color palette remains active!</li>
<li>⚡ Instant Preview: Changes CSS variables on the fly. No page reloads required.</li>
<li>🛠️ Customizable UI:
<ul>
<li>Change the trigger button text.</li>
<li>Position the button (Left/Right).</li>
<li>Adjust vertical spacing to avoid conflict with other chat widgets or buttons.</li>
</ul>
</li>
<li>🧹 Clean Reset: Includes a “Reset” button to revert to the theme’s default colors instantly.</li>
</ul>
<h3>🔧 How it Works</h3>
<ol>
<li>The plugin scans your active Block Theme.</li>
<li>It extracts color definitions from <code>settings.color.palette</code>.</li>
<li>It creates a sleek off-canvas menu on the frontend.</li>
<li>When a user clicks a color, the plugin updates the CSS Custom Properties (Variables) on the <code><body></code> tag instantly.</li>
</ol>

Alternatives to Block Theme Color Switcher

Top alternatives