77 lines
2.8 KiB
Markdown
77 lines
2.8 KiB
Markdown
# Blocksy Light/Dark Toggle
|
|
|
|
WordPress plugin that adds a **floating light/dark mode toggle** for the [Blocksy](https://creativethemes.com/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-light` classes 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-scheme` on 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
|
|
|
|
1. Copy the `blocksy-light-dark-toggle` folder to `wp-content/plugins/`.
|
|
2. Activate **Blocksy Light/Dark Toggle** under **Plugins**.
|
|
3. Configure under **Settings → Light/Dark Toggle**.
|
|
|
|
## Recommended setup (heavily customized sites)
|
|
|
|
1. Enable **Colour Mode Switch** under **Blocksy → Extensions** (Blocksy Pro / Companion).
|
|
2. Configure your **Dark Mode Colour Palette** in **Customizer → General Options → Colors**.
|
|
3. Assign dark-mode colors to global elements and blocks in the Customizer.
|
|
4. 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
|
|
|
|
```php
|
|
// 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
|