Grayscale for whole page
Application Type
Traditional Web

Hi all,

I have to change the whole application to black and white when the user clicks a button. I added the below snippet to the page css and added it to styles. But this is being overridden by the styles of the button and other components.

.filtered

{

filter: grayscale(100%) !important;

}

Even after !important, the overriding happens. Please advise

mvp_badge
MVP
Solution

Hi Abirami,

What containers and other components are overwriting your filter?
As I tried on my side and I don't see anything overwriting the filter. This is what I did:

Add a javascript to the page

document.addEventListener("DOMContentLoaded", function() {
  document.body.classList.add('gray-scale')
});
	

and have a the following css rule in my css

.gray-scale {
    filter: grayscale(1);
}

that seems to work for me

mvp_badge
MVP

Hi Abira,

You could try adding the filter class on the body tag


I tried adding a javascript "document.body.style.filter = grayscale(100%)" but the container and other components style properties overwrites the body property. How can I avoid this?

mvp_badge
MVP
Solution

Hi Abirami,

What containers and other components are overwriting your filter?
As I tried on my side and I don't see anything overwriting the filter. This is what I did:

Add a javascript to the page

document.addEventListener("DOMContentLoaded", function() {
  document.body.classList.add('gray-scale')
});
	

and have a the following css rule in my css

.gray-scale {
    filter: grayscale(1);
}

that seems to work for me

mvp_badge
MVP
PG_TraditionalWeb.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.