The Color Mode Switch extension adds an alternate Color scheme to your website. It is most commonly used to create a light and dark mode experience, but the secondary palette can be configured with any Colors that suit your design.
The extension works directly with Blocksy’s Global Color Palette, giving each palette entry an alternate value that becomes active when the website switches Color modes.
Blocksy Pro required
The Color Mode Switch extension requires Blocksy Companion Pro to be installed and active.
Getting Started
To activate the Color Mode Switch extension:
- Navigate to WordPress Dashboard → Blocksy → Extensions.
- Locate the Color Mode Switch extension.
- Enable the extension.
- Open the Customiser → General Options → Colors to configure the alternate palette.
Configuring the Alternate Color Palette
Once the extension is active, the Colors panel includes a dedicated Dark Mode Color Palette alongside the regular Global Color Palette.
Each entry in the alternate palette corresponds to the same position in your regular palette. When visitors switch Color modes, elements that reference those Global Colors automatically use their corresponding alternate values.
For example, a light background Color in your regular palette can become a dark background in the alternate palette, while dark text can switch to a lighter value to maintain sufficient contrast.
Design each mode independently
The alternate Colors do not need to be direct inverses of the regular palette. Choose values that maintain appropriate contrast and readability in each mode. You can also add additional Global Colors when certain elements require more specialised values.
Adding the Color Switch
After configuring both Color palettes, visitors need a way to switch between them. Blocksy provides dedicated Color Switch elements for this purpose.
To add the switch to your header, open the Customiser → Header and drag the Color Switch element into the desired desktop or mobile header row.
The element provides additional controls for its icon, label and default behaviour, including an OS Aware mode that can automatically follow the visitor’s operating-system Color preference.
For the complete set of options, see the Color Switch documentation.