Site Grayscale Toggle
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 …
Plugin info
Maintenance & Compatibility
Maintenance score
Actively maintained • Last updated 51 days ago
Is Site Grayscale Toggle abandoned?
Likely maintained (last update 51 days ago).
Compatibility
Similar & Alternatives
Explore plugins with similar tags, and compare key metrics like downloads, ratings, updates, support, and WP/PHP compatibility.
Description
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 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.
Installation
- Upload the plugin ZIP via Plugins Add New Upload Plugin and click Activate.
- Go to Settings Site Grayscale and configure:
- Enable grayscale by default
- Grayscale intensity (0–100)
- Show floating toggle button
- (Optional) Place the toggle anywhere with the shortcode:
[grayscale_toggle]
You can customize labels/classes:
[grayscale_toggle label_on="Grayscale: ON" label_off="Grayscale: OFF" class="my-btn"]
Frequently Asked Questions
Check two things:
1) Intensity isn’t set to 0 (go to Settings Site Grayscale set to 100 to test).
2) Visitor preference may be stored as off. Clear it in the browser console:
js
localStorage.removeItem('sgt_pref'); location.reload();
Yes. v1.1.1 removes inline JS and injects the initial class/attributes server-side, so CSP rules that block inline scripts won’t prevent grayscale from applying.
Uncheck Show floating toggle button in Settings Site Grayscale, then place [grayscale_toggle] where you want.
Yes, add CSS like this in your theme or a customizer:
css
html.is-grayscale .no-gray {
-webkit-filter: none !important;
filter: none !important;
}
Then add the class no-gray to elements you want to keep in color.
Generally no. If you don’t see changes, clear/purge caches and your CDN.
You can manage options via WP-CLI:
bash
wp option update sgt_default_on 1
wp option update sgt_intensity 100
wp option update sgt_show_button 1
Review feed
Screenshots
Changelog
1.1.1
- CSP-safe: removed inline JS and moved bootstrap to server-side attribute/class injection.
- Preserved intensity (0–100), show/hide floating button, and shortcode features.
1.1.0
- Added intensity control (0–100).
- Added show/hide floating toggle button setting.
1.0.0
- Initial release with grayscale and front-end toggle button + shortcode.