CSP-safe plugin that applies a site-wide grayscale filter with a front-end toggle. Control intensity (0–100) and whether to show a floating toggle but …
| Author: | natthasath (profile at wordpress.org) |
| WordPress version required: | |
| WordPress version tested: | 6.8.3 |
| Plugin version: | 1.1.1 |
| Added to WordPress repository: | 11-11-2025 |
| Last updated: | 11-11-2025 |
| Rating, %: | 0 |
| Rated by: | 0 |
| Plugin URI: | |
| Total downloads: | 96 |
| Active installs: | 10+ |
 Click to start download |
|
Site Grayscale Toggle lets you turn your entire site grayscale and give visitors a clear on/off switch. It’s built to be CSP-friendly (no inline JS) and to avoid a flash-of-unstyled-content by injecting the initial state on the server side.
Features:
– Grayscale filter site-wide via html.is-grayscale { filter: grayscale(var(--sgt-level)); }.
– Intensity control (0–100) from Settings Site Grayscale.
– Show/Hide floating toggle button (bottom-right by default).
– Shortcode: [grayscale_toggle] to place the switch anywhere (headers, menus, footers, blocks, widgets).
– Remembers visitor preference with localStorage across pages.
– CSP-safe: no inline JS; initial state added server-side to <html> to avoid FOUC.
– Lightweight, theme-agnostic; works alongside most caching/CDN plugins.
Use cases include memorial/monochrome modes, accessibility preferences, or design experiments that you want users to control.
FAQ
ChangeLog