MozillaZine

style not invert all

Talk about add-ons and extension development.
Diamanti
 
Posts: 700
Joined: June 12th, 2008, 9:02 am

Post Posted January 1st, 2017, 12:11 am

Why when i apply:
content.document.documentElement.style.filter="invert(100%)"
to https://github.com/mozilla/pdf.js site
it not invert all colors?
how to invert all?

morat
 
Posts: 2442
Joined: February 3rd, 2009, 6:29 pm

Post Posted January 1st, 2017, 11:02 am

Are you talking about the background color?

AFAIK, you can't invert the background color with a CSS filter.

e.g.

Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
body {
  background-color: black;
  color: white;
}
-->
</style>
</head>
<body>
<div>Example</div>
</body>
</html>

Code: Select all
content.document.body.style.filter = "invert(100%)";

greenenemy
 
Posts: 10
Joined: April 21st, 2015, 3:00 am

Post Posted January 3rd, 2017, 12:20 am

I don't know why but when i add
Code: Select all
content.document.documentElement.style.backgroundColor="red";
red or whatever valid color suddenly filter works on whole site.

morat
 
Posts: 2442
Joined: February 3rd, 2009, 6:29 pm

Post Posted January 3rd, 2017, 7:00 am

@greenenemy

Yes, that works on the GitHub page.

If you set the HTML background color, then you can invert the BODY background color, but not the HTML background color.

e.g.

Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html style="background-color: red;">
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
body {
  background-color: black;
  color: white;
}
-->
</style>
</head>
<body>
<div>Example</div>
</body>
</html>

Code: Select all
content.document.documentElement.style.filter = "invert(100%)";

Return to Extension Development


Who is online

Users browsing this forum: No registered users and 2 guests