natthasath

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 <code>html.is-grayscale { filter: grayscale(var(--sgt-level)); }</code>. 
– Intensity control (0–100) from Settings → Site Grayscale. 
– Show/Hide floating toggle button (bottom-right by default). 
– Shortcode: <code>[grayscale_toggle]</code> to place the switch anywhere (headers, menus, footers, blocks, widgets). 
– Remembers visitor preference with <code>localStorage</code> across pages. 
– CSP-safe: no inline JS; initial state added server-side to <code><html></code> 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.

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 …

Fabien Quatravaux

Sometimes, your website design requires to turn pictures in black & white : for example in a gallery display, you can have all thumbnails in grayscale and bring up colors when the mouse is hovering it. 
This plugin will make it possible without the need to manualy create the grayscale variant of each picture.
In your theme’s <code>functions.php</code>, instead of using WP <a href="https://codex.wordpress.org/Function_Reference/add_image_size" rel="nofollow ugc">add_image_size</a> function, use <code>grayscale_add_image_size('custom_size', xxx, yyy, $crop, $grayscale)</code> (with <code>$crop</code> set to <code>true</code> if you want to crop the image, and <code>$grayscale</code> set to <code>true</code> if you want a grayscale version of the image). Then, you can use <a href="https://codex.wordpress.org/Function_Reference/the_post_thumbnail" rel="nofollow ugc">the_post_thumbnail</a> or any thumbnail function to get your grayscale image :
<pre><code>the_post_thumbnail('custom_size-gray')
</code></pre>
A gamma correction is applied automatically to make the black & white pictures look good. From version 1.2, You can tune this gamma correction with the <code>grayscale_gamma_correction</code> filter. Your filter would have to return a float number that will be use as the <code>outputgamma</code> parameter of the <a href="http://php.net/manual/fr/function.imagegammacorrect.php" rel="nofollow ugc">imagegammacorrect</a> function.
<h4>Known bugs</h4>
<ul>
<li>Grayscale images are not generated when the original image size is smaller than the specified thumbnail size.</li>
</ul>

Grayscale

Automatically create grayscale thumbnails for a given image size.

Site Grayscale Toggle vs Grayscale