I'm using the library Html2Pdf which works really well to allow my app's users to download as PDF their invoices displayed in HTML. The problem encountered is when anyone needs to download his/her invoice while using dark mode.
Switching from light to dark mode and reverse works by adding/removing a "disabled" attribute to the link tag:
<link href="path/to/css/app.css" rel="stylesheet" type="text/css" id="light" />
<link href="path/to/css/app-dark.css" rel="stylesheet" type="text/css" id="dark" disabled="disabled" />
Both files have the same css rules, only colours change.
If someone is using dark mode and need to download a PDF, html2pdf.js will print it exactly as it shown based on current css rules, therefore with black/gray backgrounds/fonts which isn't really ideal for an invoice!
I already tried to change styles dynamically in the function which render the PDF after click, but of course the change is clearly visible to the user since it affects the whole page (app page meaned here).
Therefore, my question is the following : How could I tell the function html2pdf() which CSS rules using without affecting the page itself?
EDIT
Since there's objectively no real solution this is what I did (and not proud of) :
I duplicated the whole element which was use for PDF printing to a second version hide from the user (display: none;) with its own styling on each concerned and other elements.
Therefore this version stays white-based and the "display: none" styling property doesn't affect how html2pdf get the element to create a PDF based on.
This is the only solution I found for now but I would of course be pleased if someone comes with a proper one !
You can paste style to head or even a styles file. It doesn't work here, but check out codepen.io
If you do not need to support old browsers, you can use the css variables and, for example, after clicking, change the parameters by
document.documentElement.style.setProperty("-color", "#000");
I know this does not solve the problem, but a change to the html2pdf itself seems very hard to obtain.
const button = document.querySelector(".makePDF");
button.addEventListener("click", (e) => {
e.preventDefault();
const style = document.createElement("style");
style.textContent = `body { background: #fff; color: #000; }`;
document.head.appendChild(style);
const element = document.querySelector("body");
const opt = {
margin: 1,
filename: "myfile.pdf",
image: {
type: "jpeg",
quality: 0.98
},
html2canvas: {
scale: 1
},
jsPDF: {
unit: "mm",
orientation: "landscape",
},
};
html2pdf().set(opt).from(element).save();
});body {
font-family: nhg-text-bold, arial, sans-serif;
font-weight: bold;
letter-spacing: -0.4px;
background: #000;
color: #fff;
}
.border {
height: 400px;
width: 890px;
border: 1px solid red;
}
.verLogo {
padding-left: 400px;
font-size: 25px;
}
.mainContent h1 {
margin-left: 280px;
letter-spacing: 1.5px;
}
.sepLine {
border-bottom: 1px solid black;
width: 300px;
margin-left: 300px;
}
.UserName,
h2,
h3 {
margin-left: 350px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<button type="button" class="makePDF">PDF</button>
<div id="content">
<div class="border">
<div class="mainContent">
<h1>CONGRATULATIONS</h1>
<div class="sepLine"></div>
<span class="UserName">
<h2>xxxxxxxxxxxxx</h2>
<h3>You have completed</h3>
<h1>Lorem, ipsum dolor.</h1>
</span>
</div>
</div>
</div>Place the appropriate color overrides in a @media print block, and always include that CSS on the page. For example,
<style>
@media print {
body {
background-color: white !important;
color: black !important;
}
}
</style>