4WP Style Switcher is a WordPress plugin for Full Site Editing (FSE) block themes that reads the style variations already defined in your theme’s theme.json and /styles/*.json files — then lets you assign a variation per page, give visitors a frontend switcher, add a Light/Dark toggle to your navigation menu, and run simple A/B tests between two variations. No custom CSS, no separate dark-mode stylesheet, no child theme required.
A Native Style Variation Switcher for theme.json — No Extra Stylesheets
Block themes already ship multiple style variations — alternate color palettes, typography, and spacing defined as JSON files under the theme’s /styles/ directory. WordPress lets you preview these in the Site Editor, but out of the box there’s no way to assign a variation to a specific page, let visitors switch between light and dark on the frontend, or test which variation performs better.
4WP Style Switcher closes that gap. It reads the variations your theme already defines — it doesn’t generate new CSS or require a second theme.json — and exposes them through four tools: per-page style assignment, a frontend switcher widget, a Light/Dark navigation block, and lightweight A/B testing.
Who 4WP Style Switcher Is For
- Block theme developers who already ship multiple style variations and want a ready-made dark mode toggle for WordPress without building one from scratch
- Agencies and freelancers building FSE sites for clients who ask for “a light/dark switch” or “different styling per landing page”
- Marketing and content teams who want to A/B test a style variation — for example, a seasonal palette or a high-contrast layout — without a full experimentation platform
- Sites using Twenty Twenty-Five or any other block theme with a
/styles/folder containing multipletheme.jsonstyle variations
What You Can Do With 4WP Style Switcher
Per-Page Style Variations
Open the Page style panel in the block editor and assign any registered theme.json style variation to that page. Optionally lock the variation so the frontend switcher and Light/Dark toggle don’t override it — useful for landing pages that need a fixed look regardless of visitor preference.
Frontend Style Switcher for Visitors
A floating switcher lets visitors pick from the style variations you’ve allowed in Settings → Variations. Their choice is stored in localStorage and synced to a cookie so the correct style renders on the very next server-side page load — no flash of the wrong theme.
Light/Dark Toggle as a Navigation Block
The plugin registers a Light / Dark Gutenberg block that drops straight into the Navigation block in your header or footer. Map any two style variations to the sun/moon icons — this is the fastest way to add a real dark mode toggle to a WordPress block theme without writing JavaScript.
Built-in A/B Testing Between Style Variations
Split new visitors between two style variations and track which one gets more engagement using a lightweight, daily-aggregated stats table stored in your own WordPress database — no external analytics account needed.
Key Features
- Reads existing theme.json variations — no duplicate styles or extra stylesheets to maintain
- Per-page style assignment with an optional lock against visitor overrides
- Frontend switcher with localStorage + cookie sync for correct server-side rendering
- Light / Dark navigation block with sun/moon icon mapping to two variations
- A/B testing with daily aggregate stats stored locally — no third-party tracking
- Developer hooks for variation lists, A/B cohort assignment, and analytics events
4WP Style Switcher vs. Other Ways to Add Dark Mode to a Block Theme
Adding a light/dark or per-page style switch to a WordPress block theme usually means one of a few approaches. Here’s how 4WP Style Switcher compares for FSE sites that already define style variations in theme.json.
| Approach | Uses existing theme.json variations | Per-page assignment | Visitor-facing toggle | A/B testing | Extra CSS required |
|---|---|---|---|---|---|
| 4WP Style Switcher | Yes | Yes, with lock option | Yes — floating switcher + nav block | Yes, built-in | No |
Manual prefers-color-scheme CSS in theme.json | No — single fixed style | No | No (follows OS setting only) | No | Minimal, hand-written |
| Child theme with alternate theme.json | Partial — requires a separate theme | No | No | No | None, but a full child theme to maintain |
| Generic dark-mode toggle blocks | No — typically CSS variable overrides | No | Yes — toggle only | No | Yes, custom CSS variables |
| Full A/B testing platforms (SaaS) | No | Depends on platform | Depends on platform | Yes, advanced | No, but adds external script and cost |
The core difference is that 4WP Style Switcher works with the style variations a theme already ships, rather than asking you to write new CSS, maintain a child theme, or wire up a separate experimentation tool for a simple two-variation split test.
Live Demo on WordPress Playground
The demo site runs on Twenty Twenty-Five with About, Morning, Afternoon, and Evening pages, each using a different per-page style variation. The Afternoon page is locked, the floating visitor switcher sits in the bottom-right corner, and the header/footer navigation includes the Light/Dark toggle — all running live in your browser via WordPress Playground, no installation required.
Installation
- Upload and activate the plugin on a block theme (FSE) with style variations under
/styles/. - Go to Settings → 4WP Style Switcher.
- On the Variations tab, check which style variations visitors are allowed to use.
- Under General, set the default variation and, optionally, map two variations to the Light/Dark toggle.
- Edit any page → open the Page style panel to assign or lock a variation for that page.
- In the Site Editor, insert the Light / Dark block inside your Navigation block.
Privacy
When the visitor switcher or A/B testing is enabled, the plugin may store the selected style variation in a browser cookie (forwp_ss_style) and in localStorage on the visitor’s device. No personal data is sent to third-party services. A/B testing stats are aggregated counts stored entirely in your own WordPress database.
Requirements
| Theme type | Block theme (Full Site Editing) with /styles/ variations |
| WordPress version | 6.4 or higher |
| PHP version | 7.4 or higher |
| Tested up to | WordPress 7.0 |
| Current version | 1.0.1 |
Frequently Asked Questions
Which themes are supported?
Block themes (FSE) that ship style variations under the theme’s /styles/ directory — including Twenty Twenty-Five and most modern block themes that follow the theme.json style variations standard.
Do I need to write any custom CSS for dark mode?
No. 4WP Style Switcher reads the style variations your theme already defines in theme.json. If your theme ships a dark-style variation, the plugin can expose it through the frontend switcher and the Light/Dark navigation block with no additional CSS.
Does the floating switcher show every style variation from the theme?
No — it only shows variations you’ve allowed on the Variations settings tab. The Light/Dark navigation block is separate and uses only the two variations explicitly mapped under General.
Can I lock a page to a specific style so visitors can’t change it?
Yes. The Page style panel includes a lock option. When a page is locked, the frontend switcher and the Light/Dark toggle won’t override its assigned variation for that page.
How does the A/B testing feature work?
New visitors are split between two style variations you choose. The plugin records daily aggregate counts in your WordPress database — there’s no external analytics service or per-visitor tracking involved.
Where is the WordPress Playground demo configured?
In the GitHub repository, under playground/setup.php and .wordpress-org/assets/blueprints/blueprint.json — you can use the same blueprint to spin up your own test environment.
Need a Custom FSE Block Theme or Style Variations Setup?
4WP Style Switcher works best on a block theme with well-structured theme.json style variations — and not every theme ships with them out of the box. 4wpdev builds custom Full Site Editing (FSE) WordPress themes, theme.json style variation sets (including light/dark pairs ready for this plugin), and bespoke Gutenberg blocks for agencies and product teams. If you need a per-page styling system, a branded dark mode, or a custom block built around the SOLID and DDD patterns documented at 4wp.dev, get in touch through the 4wp.dev plugin page.
More Plugins from 4wpdev
4WP Style Switcher is part of a growing set of WordPress tools built by 4wpdev, including 4WP Drive for importing Google Docs into WordPress as drafts. See the full list on the 4wpdev WordPress.org profile.
Development and Contributing
4WP Style Switcher is open source. The full PHP source and release history are available in the public GitHub repository. The plugin ZIP includes a src/ directory with PSR-4 autoloading via src/Autoload.php when vendor/ is absent. There’s no npm build step — front-end scripts ship as plain JavaScript in assets/.
Available hooks for developers: forwp_style_switcher_variations (filter the theme variation list), forwp_style_switcher_ab_assigned (fires after A/B cohort assignment), forwp_style_switcher_analytics_track (analytics events), and forwp_style_switcher_ab_assignment_enabled (filter A/B assignment).
“4WP” is our project brand name — “WP” appears only as part of that name and is not a reference to WordPress. This plugin is not affiliated with, endorsed, or sponsored by WordPress.