WordPress CSS Switcher

The {CODICTS} CSS Switcher plugin lets you create alternate CSS stylesheets and place a toggle switch anywhere on your site so visitors can switch between your default styles and an alternate style on the fly — for example, a dark mode toggle.

Installation & Activation

Start by downloading the plugin from the Downloads page on your dashboard on the CoDicts website.

After downloading, install and activate the plugin in WordPress by navigating to “Plugins” > “Add New” > “Upload Plugin” and selecting the downloaded zip file. Click “Install Now” and then “Activate”.

Once activated, navigate to {CODICTS} CSS Switcher → CSS Templates in the admin sidebar to create your first alternate stylesheet.

Key Features

Feature	Description
Custom CSS Templates	Create unlimited alternate stylesheets via a full-featured code editor with syntax highlighting.
Toggle Shortcode	Place a styled toggle switch anywhere on your site with a simple shortcode.
Instant Toggle	CSS is applied or removed instantly when the user clicks the switch — no page reload needed.
Persistent Preference	The visitor’s choice is saved in a browser cookie for 365 days, so it persists across page loads and sessions.
No Flash of Unstyled Content	If the visitor has previously enabled the alternate style, it’s applied server-side before the page renders — no flicker.
Duplicate & Delete	Easily duplicate templates or delete ones you no longer need.
No Configuration Overhead	Create a template, paste the shortcode, done.

Common Use Cases

Dark mode / Light mode — Let visitors switch between a light and dark color scheme.

Accessibility — Offer a high-contrast or large-text alternative for better readability.

Seasonal or promotional themes — Let visitors opt into a holiday or campaign-specific look.

Design previews — Let users preview and choose between design variants.

Creating a CSS Template

Step 1: Add a New Template

Go to {CODICTS} CSS Switcher → Add New in the WordPress admin.

Step 2: Enter a Title

Give your template a descriptive name (e.g., “Dark Mode”). This is for your reference in the admin only — visitors won’t see it.

Step 3: Set the Button Label

In the CSS Template panel, enter a Button Label. This is the text that appears next to the toggle switch on the frontend (e.g., “Enable Dark Mode”, “High Contrast”, “Night Theme”).

Step 4: Write Your CSS

Write the alternate CSS in the code editor. The editor includes syntax highlighting, line numbers, and bracket matching to make editing easy.

This CSS will be injected into the page when a visitor turns the toggle on, and removed when they turn it off. Write it as you would any CSS stylesheet — target the elements you want to change.

Example — Dark Mode:

body {
  background-color: #1a1a2e !important;
  color: #e0e0e0 !important;
}

a {
  color: #64b5f6 !important;
}

.header, .footer {
  background-color: #16213e !important;
}

Tip: You may need to use !important on your rules to ensure they override your theme’s existing styles.

Step 5: Save

Click “Save”. The generated shortcode appears at the top of the editor — copy it for the next step.

Placing the Toggle Switch

Use the shortcode to place the toggle switch anywhere on your site:

[codicts-css-switcher id="42"]

Replace 42 with the actual ID shown in your template’s shortcode. You can find the shortcode in the template editor or in the Shortcode column of the CSS Templates list.

Place it in any post, page, widget area, header, footer, or theme template.

Important: The alternate CSS only affects pages where the shortcode is present. If you want the toggle available on every page, place the shortcode in a global element like a header widget, footer widget, or theme template that appears site-wide.

How It Works

When a visitor clicks the toggle switch:

Toggle ON: The alternate CSS is instantly injected into the page. A cookie is saved so the preference persists.

Toggle OFF: The alternate CSS is instantly removed. The cookie is updated.

On return visits: If the visitor previously turned the toggle on, the alternate CSS is applied server-side when the page loads — before the page renders — so there’s no flash of the default style.

The preference cookie lasts for 365 days and is set site-wide (path /), so the visitor’s choice carries across pages and sessions.

Managing Templates

Navigate to {CODICTS} CSS Switcher → CSS Templates to see all your templates in a list.

List Table Features

Feature	Description
Search	Search templates by title.
Sort	Sort by Title, Author, or Date.
Edit	Click a template title to open the editor.
Duplicate	Create a copy of a template (appends “_copy” to the title).
Delete	Permanently delete a template.
Bulk Delete	Select multiple templates and delete them at once.

Toggle Switch Accent Color

The toggle switch uses the CSS custom property var(--accent) for its active (ON) background color. This means:

If your theme defines --accent (as the Voxel Theme and many modern themes do), the toggle automatically matches your theme’s accent color.

If your theme does not define --accent, the toggle’s active state may not have a visible background color. To fix this, add one of the following to your theme’s CSS:

/* Option A: Define the --accent variable */
:root {
  --accent: #2196F3;
}

/* Option B: Override the toggle directly */
.ccsss-form-switch input:checked + .switch-slider {
  background-color: #2196F3;
}

Using Multiple Templates

You can create multiple CSS templates and place their toggle shortcodes on the same page or on different pages. Each template has its own independent toggle and its own cookie, so visitors can enable or disable each one separately.

For example, you could offer both a “Dark Mode” toggle and a “Large Text” toggle on the same page, and visitors can enable either, both, or neither.

Troubleshooting

Toggle Switch Not Appearing

Cause	Solution
Missing or invalid `id`	Ensure the shortcode includes a valid template ID: `[codicts-css-switcher id="42"]`. Check the ID in the CSS Templates list.
Template doesn’t exist	The template may have been deleted. Verify it exists in {CODICTS} CSS Switcher → CSS Templates.
jQuery not loaded	The toggle requires jQuery, which WordPress loads by default. If another plugin or theme has removed jQuery, the toggle won’t function.

Alternate CSS Not Applying When Toggle Is On

Cause	Solution
Empty CSS body	Edit the template and make sure CSS code has been entered in the editor.
CSS specificity too low	Your alternate CSS may not be overriding the theme’s styles. Add `!important` to your rules or increase selector specificity.
JavaScript error on the page	Check the browser console for errors that may prevent the toggle from working.

Preference Doesn’t Persist Across Page Loads

Cause	Solution
Cookies disabled in browser	The visitor’s browser may have cookies disabled. The preference cannot persist without cookies.
Cookie blocked by consent plugin	A cookie consent plugin may be blocking the `ccsss-style-*` cookie. Whitelist it in your consent plugin’s settings.

Toggle Has No Visible Active Color

The toggle’s active (ON) state uses the CSS variable var(--accent). If your theme doesn’t define this variable, the switch background won’t change color when toggled on. See the Toggle Switch Accent Color section above for how to fix this.

Code Editor Not Loading in Admin

Cause	Solution
JavaScript conflict	Another plugin may be conflicting with WordPress’s bundled CodeMirror editor. Temporarily deactivate other plugins to test.
Outdated WordPress version	The code editor requires WordPress’s built-in CodeMirror library. Ensure WordPress is up to date.

CSS Appears on Pages Where I Don’t Want It

The alternate CSS is only injected on pages where the shortcode is present. If the toggle appears site-wide (because the shortcode is in a header, footer, or global widget), the CSS will also be applied site-wide when the toggle is on. To limit it to specific pages, move the shortcode to only those pages.

For further support, visit codicts.com or contact us at support@codicts.com.

Can’t find the help you need?