The Color Switch element lets visitors switch between your website’s regular and alternate Color schemes. It is commonly used to provide a light/dark mode experience and works together with Blocksy Pro’s Color Mode Switch extension.
To make the element available, navigate to Blocksy → Extensions and activate the Color Mode Switch extension. You can then open the Customiser → Header and drag the Color Switch element into the desired header row.
The alternate Color scheme itself is configured under Customiser → General Options → Colors, where activating the extension adds a separate palette for the alternate mode.
Granular Controls
Icon Controls
Choose from three built-in animated icon styles for representing the Color mode switch in the header.
The Icon Size control lets you adjust the dimensions of the selected icon so it fits naturally alongside the other header elements.
Label Visibility
Control whether the text label is displayed on desktop, tablet and mobile devices independently. This lets you use a descriptive label on larger screens while keeping a more compact icon-only presentation where space is limited.
OS Aware
Enable OS Aware to let the website automatically follow the visitor’s operating system Color preference. For example, visitors whose device is configured to use a dark appearance can automatically receive your alternate Color scheme when they arrive on the website.
Visitors can still use the Color Switch element to change between the available modes themselves.