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 need 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.
Therefore, my question is the following : How could I tell the function html2pdf() which css rules using without affecting the page itself ?