efe73b79c84eb56abffcdf419c6ed9da396bbeb9
Blocksy Light/Dark Toggle
WordPress plugin that adds a floating light/dark mode toggle for the Blocksy theme v2.1+ (tested with v2.1.38).
Features
- Beatwise-specific dark-mode fixes (menu, footer, brand purple,
/codes, reservations) - Floating switch button (default: bottom-right)
- Uses Blocksy's native
theme-dark/theme-lightclasses on<html> - Integrates with Blocksy's Colour Mode Switch extension when enabled
- Fallback dark palette when the extension is not active
- Settings page under Settings → Light/Dark Toggle
- Hides Blocksy header colour switch by default (configurable)
- Remembers choice in
localStorage, cookie, and user meta - Respects system
prefers-color-schemeon first visit (configurable) - No flash of wrong theme (inline script in
<head>) - Developer filters for custom integrations
Requirements
- WordPress 6.0+
- Active theme: Blocksy v2.1+ (or a child theme)
Installation
- Copy the
blocksy-light-dark-togglefolder towp-content/plugins/. - Activate Blocksy Light/Dark Toggle under Plugins.
- Configure under Settings → Light/Dark Toggle.
Recommended setup (heavily customized sites)
- Enable Colour Mode Switch under Blocksy → Extensions (Blocksy Pro / Companion).
- Configure your Dark Mode Colour Palette in Customizer → General Options → Colors.
- Assign dark-mode colors to global elements and blocks in the Customizer.
- Keep Hide header colour switch enabled in plugin settings to avoid duplicate toggles.
When the Colour Mode Switch extension is active, the plugin does not load its fallback palette — your Customizer dark colors are used.
Settings
| Option | Default | Description |
|---|---|---|
| Position | Bottom right | Corner placement of the floating toggle |
| Horizontal / vertical offset | 1.25rem | CSS distance from screen edge |
| Z-index | 999999 | Stacking order |
| Hide header colour switch | On | Hides Blocksy's built-in header toggle |
| Follow system preference | On | Uses OS light/dark on first visit |
| Animate transitions | On | Smooth colour change animation |
| Show on mobile / desktop | On | Device visibility |
Developer hooks
// Override whether the toggle renders.
add_filter( 'blc_ldt_should_render', function ( $show ) {
return ! is_page( 'landing' );
});
// Override initial scheme from server.
add_filter( 'blc_ldt_initial_scheme', function ( $scheme ) {
return $scheme;
});
// Override settings array.
add_filter( 'blc_ldt_settings', function ( $settings ) {
$settings['position'] = 'bottom-left';
return $settings;
});
// Force-detect Blocksy colour mode extension.
add_filter( 'blc_ldt_has_blocksy_color_mode', '__return_true' );
License
GPL-2.0-or-later
Description
Languages
PHP
58.7%
CSS
30.6%
JavaScript
10.7%