{"id":259805,"date":"2025-11-11T03:12:59","date_gmt":"2025-11-11T03:12:59","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/site-grayscale-toggle\/"},"modified":"2025-11-11T03:12:32","modified_gmt":"2025-11-11T03:12:32","slug":"site-grayscale-toggle","status":"publish","type":"plugin","link":"https:\/\/sw.wordpress.org\/plugins\/site-grayscale-toggle\/","author":23206462,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.1.1","stable_tag":"trunk","tested":"6.8.5","requires":"","requires_php":"","requires_plugins":null,"header_name":"Site Grayscale Toggle","header_author":"natthasath","header_description":"Apply a site-wide grayscale effect with a front-end toggle button so visitors can turn it off\/on. Intensity control and option to show\/hide the floating button. CSP-safe (no inline JS).","assets_banners_color":"e0e7ea","last_updated":"2025-11-11 03:12:32","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"","rating":0,"author_block_rating":0,"active_installs":10,"downloads":218,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":[],"upgrade_notice":{"1.1.1":"<p>CSP-safe build: removes inline JS and adds server-side bootstrap to avoid FOUC and comply with strict CSP rules. Recommended for sites using security headers and caching\/CDN layers.<\/p>"},"ratings":[],"assets_icons":{"icon-256x256.png":{"filename":"icon-256x256.png","revision":3393338,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-772x250.png":{"filename":"banner-772x250.png","revision":3393335,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":[],"block_files":[],"assets_screenshots":[],"screenshots":{"1":"Floating grayscale toggle button shown on the front-end.","2":"Settings page: default state, intensity, and show\/hide button.","3":"Front-end when grayscale is ON.","4":"Front-end when grayscale is OFF."},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[1953,2236,10380,2133,566],"plugin_category":[34],"plugin_contributors":[236893],"plugin_business_model":[],"class_list":["post-259805","plugin","type-plugin","status-publish","hentry","plugin_tags-accessibility","plugin_tags-filter","plugin_tags-grayscale","plugin_tags-toggle","plugin_tags-ui","plugin_category-accessibility","plugin_contributors-natthasath","plugin_committers-natthasath"],"banners":{"banner":"https:\/\/ps.w.org\/site-grayscale-toggle\/assets\/banner-772x250.png?rev=3393335","banner_2x":false,"banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/site-grayscale-toggle\/assets\/icon-256x256.png?rev=3393338","icon_2x":"https:\/\/ps.w.org\/site-grayscale-toggle\/assets\/icon-256x256.png?rev=3393338","generated":false},"screenshots":[],"raw_content":"<!--section=description-->\n<p><strong>Site Grayscale Toggle<\/strong> lets you turn your entire site grayscale and give visitors a clear on\/off switch. It's built to be <strong>CSP-friendly (no inline JS)<\/strong> and to avoid a flash-of-unstyled-content by injecting the initial state on the server side.<\/p>\n\n<p><strong>Features:<\/strong>\n- <strong>Grayscale filter site-wide<\/strong> via <code>html.is-grayscale { filter: grayscale(var(--sgt-level)); }<\/code>.\n- <strong>Intensity control (0\u2013100)<\/strong> from Settings \u2192 Site Grayscale.\n- <strong>Show\/Hide floating toggle button<\/strong> (bottom-right by default).\n- <strong>Shortcode<\/strong>: <code>[grayscale_toggle]<\/code> to place the switch anywhere (headers, menus, footers, blocks, widgets).\n- <strong>Remembers visitor preference<\/strong> with <code>localStorage<\/code> across pages.\n- <strong>CSP-safe<\/strong>: no inline JS; initial state added server-side to <code>&lt;html&gt;<\/code> to avoid FOUC.\n- Lightweight, theme-agnostic; works alongside most caching\/CDN plugins.<\/p>\n\n<p>Use cases include memorial\/monochrome modes, accessibility preferences, or design experiments that you want users to control.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin ZIP via <strong>Plugins \u2192 Add New \u2192 Upload Plugin<\/strong> and click <strong>Activate<\/strong>.<\/li>\n<li>Go to <strong>Settings \u2192 Site Grayscale<\/strong> and configure:\n\n<ul>\n<li><strong>Enable grayscale by default<\/strong><\/li>\n<li><strong>Grayscale intensity (0\u2013100)<\/strong><\/li>\n<li><strong>Show floating toggle button<\/strong><\/li>\n<\/ul><\/li>\n<li>(Optional) Place the toggle anywhere with the shortcode:\n   <code>[grayscale_toggle]<\/code>\nYou can customize labels\/classes:\n   <code>[grayscale_toggle label_on=\"Grayscale: ON\" label_off=\"Grayscale: OFF\" class=\"my-btn\"]<\/code><\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id='why%20did%20enabling%20grayscale%20not%20change%20my%20site%3F'><h3>Why did enabling grayscale not change my site?<\/h3><\/dt>\n<dd><p>Check two things:\n1) <strong>Intensity<\/strong> isn't set to <code>0<\/code> (go to Settings \u2192 Site Grayscale \u2192 set to <code>100<\/code> to test).<br \/>\n2) <strong>Visitor preference<\/strong> may be stored as <code>off<\/code>. Clear it in the browser console:\n    <code>js\nlocalStorage.removeItem('sgt_pref'); location.reload();<\/code><\/p><\/dd>\n<dt id='does%20it%20work%20under%20strict%20content-security-policy%20%28csp%29%3F'><h3>Does it work under strict Content-Security-Policy (CSP)?<\/h3><\/dt>\n<dd><p>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.<\/p><\/dd>\n<dt id='how%20do%20i%20hide%20the%20floating%20button%20and%20use%20only%20the%20shortcode%3F'><h3>How do I hide the floating button and use only the shortcode?<\/h3><\/dt>\n<dd><p>Uncheck <strong>Show floating toggle button<\/strong> in Settings \u2192 Site Grayscale, then place <code>[grayscale_toggle]<\/code> where you want.<\/p><\/dd>\n<dt id='can%20i%20exclude%20some%20elements%20from%20being%20grayscaled%3F'><h3>Can I exclude some elements from being grayscaled?<\/h3><\/dt>\n<dd><p>Yes, add CSS like this in your theme or a customizer:\n    <code>css\nhtml.is-grayscale .no-gray {\n  -webkit-filter: none !important;\n  filter: none !important;\n}<\/code>\nThen add the class <code>no-gray<\/code> to elements you want to keep in color.<\/p><\/dd>\n<dt id='will%20it%20conflict%20with%20caching%2Fcdn%20plugins%3F'><h3>Will it conflict with caching\/CDN plugins?<\/h3><\/dt>\n<dd><p>Generally no. If you don't see changes, clear\/purge caches and your CDN.<\/p><\/dd>\n<dt id='is%20there%20wp-cli%20support%3F'><h3>Is there WP-CLI support?<\/h3><\/dt>\n<dd><p>You can manage options via WP-CLI:\n    <code>bash\nwp option update sgt_default_on 1\nwp option update sgt_intensity 100\nwp option update sgt_show_button 1<\/code><\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.1.1<\/h4>\n\n<ul>\n<li><strong>CSP-safe:<\/strong> removed inline JS and moved bootstrap to server-side attribute\/class injection.<\/li>\n<li>Preserved intensity (0\u2013100), show\/hide floating button, and shortcode features.<\/li>\n<\/ul>\n\n<h4>1.1.0<\/h4>\n\n<ul>\n<li>Added intensity control (0\u2013100).<\/li>\n<li>Added show\/hide floating toggle button setting.<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release with grayscale and front-end toggle button + shortcode.<\/li>\n<\/ul>","raw_excerpt":"CSP-safe plugin that applies a site-wide grayscale filter with a front-end toggle. Control intensity (0\u2013100) and whether to show a floating toggle but &hellip;","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/259805","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=259805"}],"author":[{"embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/natthasath"}],"wp:attachment":[{"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=259805"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=259805"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=259805"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=259805"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=259805"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=259805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}