Beschrijving
Site Grayscale Toggle
Beschrijving
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.
Installatie
- 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"]
FAQ
Why did enabling grayscale not change my site?
Check two things:
1) Intensity isn’t set to0(go to Settings Site Grayscale set to100to test).
2) Visitor preference may be stored asoff. Clear it in the browser console:
js
localStorage.removeItem('sgt_pref'); location.reload();Does it work under strict Content-Security-Policy (CSP)?
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.Can I exclude some elements from being grayscaled?
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 classno-grayto elements you want to keep in color.Will it conflict with caching/CDN plugins?
Generally no. If you don’t see changes, clear/purge caches and your CDN.
Is there WP-CLI support?
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
Beoordelingen
Er zijn geen beoordelingen voor deze plugin.
Bijdragers & ontwikkelaars
“Site Grayscale Toggle” is open source software. De volgende personen hebben bijgedragen aan deze plugin.
Bijdragers
Vertaal “Site Grayscale Toggle” in je eigen taal.
Interesse in ontwikkeling?
Bekijk de code, haal de SVN repository op, of abonneer je op het ontwikkellog via RSS.
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.
