Title: Site Grayscale Toggle Author: natthasath Published: 11, Payares de 2025 Last modified: 11, Payares de 2025 --- Guetar plugins ![](https://ps.w.org/site-grayscale-toggle/assets/banner-772x250.png?rev=3393335) ![](https://ps.w.org/site-grayscale-toggle/assets/icon-256x256.png?rev=3393338) # Site Grayscale Toggle By [natthasath](https://profiles.wordpress.org/natthasath/) [Download](https://downloads.wordpress.org/plugin/site-grayscale-toggle.zip) * [Details](https://ast.wordpress.org/plugins/site-grayscale-toggle/#description) * [Reviews](https://ast.wordpress.org/plugins/site-grayscale-toggle/#reviews) * [Installation](https://ast.wordpress.org/plugins/site-grayscale-toggle/#installation) * [Development](https://ast.wordpress.org/plugins/site-grayscale-toggle/#developers) [Support](https://wordpress.org/support/plugin/site-grayscale-toggle/) ## 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 1. Upload the plugin ZIP via **Plugins Add New Upload Plugin** and click **Activate**. 2. Go to **Settings Site Grayscale** and configure: 3. * **Enable grayscale by default** * **Grayscale intensity (0–100)** * **Show floating toggle button** 4. (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 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(); ### 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. ### How do I hide the floating button and use only the shortcode? 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 class no-gray to 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 ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Site Grayscale Toggle” is open source software. The following people have contributed to this plugin. Contributors * [ natthasath ](https://profiles.wordpress.org/natthasath/) [Translate “Site Grayscale Toggle” into your language.](https://translate.wordpress.org/projects/wp-plugins/site-grayscale-toggle) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/site-grayscale-toggle/), check out the [SVN repository](https://plugins.svn.wordpress.org/site-grayscale-toggle/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/site-grayscale-toggle/) by [RSS](https://plugins.trac.wordpress.org/log/site-grayscale-toggle/?limit=100&mode=stop_on_copy&format=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. ## Meta * Version **1.1.1** * Last updated **5 meses ago** * Active installations **10+** * Tested up to **6.8.5** * Language * [English (US)](https://wordpress.org/plugins/site-grayscale-toggle/) * Tags * [accessibility](https://ast.wordpress.org/plugins/tags/accessibility/)[filter](https://ast.wordpress.org/plugins/tags/filter/) [grayscale](https://ast.wordpress.org/plugins/tags/grayscale/)[toggle](https://ast.wordpress.org/plugins/tags/toggle/) [ui](https://ast.wordpress.org/plugins/tags/ui/) * [Advanced View](https://ast.wordpress.org/plugins/site-grayscale-toggle/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/site-grayscale-toggle/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/site-grayscale-toggle/reviews/) ## Contributors * [ natthasath ](https://profiles.wordpress.org/natthasath/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/site-grayscale-toggle/)