The print-color-adjust property for CSS provides a hint to the user-agent about how it should treat color and style choices that might be expensive or generally unwise on a given device.
print-color-adjust: value; object.style.printColorAdjust = "value"; <'print-color-adjust'> = economy | exact economy The user agent should make adjustments to the page's styling as it deems necessary.
exact The user agent should not make adjustments to the page's styling except at the user's request.
<!doctype html>
<html>
<head>
<style>
p
{
background-color: black;
color: gray;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
</style>
</head>
<body>
<p>exact</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
background-color: black;
color: gray;
}
</style>
</head>
<body>
<button>initial</button>
<button>economy</button>
<button>exact</button>
<p>print-color-adjust</p>
<script>
function myfunction(myparameter)
{
const myproperty = myparameter.target.innerHTML;
const mystyle = document.querySelector("p").style;
mystyle.webkitPrintColorAdjust = myproperty;
mystyle.printColorAdjust = myproperty;
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>