What I’m trying to do
I want to export some of my notes into PDFs with a dark background and white text, instead of the usual white background and black text, because some of the images and color schemes are hard to see on the white background. (This is for online sharing, not printing)
I looked through the forum for help with the CSS snippet, but there doesn’t look to be any successful attempts in changing the entire background color of the PDF. I referenced this post (How to add a background image or color to exported PDF) and I have this CSS snippet so far:
@media print {
.markdown-preview-view {
background-color: rgb(30, 30, 30);
color: white;
}
}
Besides the white margin at the bottom of the page, the biggest problem I’m running into is that my customized callouts are disappearing in the exported PDF. Specifically, the callouts and their contents aren’t visually visible, but text in the callouts are still there?
I have several customized callouts for floating callouts, etc. but for a simple example, I’ll use a note with this custom CSS to change the color of the info callout.
.callout[data-callout=info] {
--callout-color: 140, 195, 230;
}
Normal PDF export:
Export with the above CSS snippet:
All text on PDF highlighted, to show that the text in the callout is there:
To note, any images inside callouts also become invisible.
When I remove the custom CSS for the info callout, this is what the export looks like:
It’s still not readable.
Things I have tried
I tried adding the custom CSS for the callout under the @media print code, but nothing changed.
I also considered the Export Image Plugin as an alternative, but I would prefer to have these notes exported as PDFs so that the text can be selected, copy-pasted etc.
