Export to PDF code block is gray on slighty more gray with my preferred theme and gray on white with default

Help
1

There seem to be many questions about this, but no definitive answers.
I’m using the Tomorrow Night Bright theme.
Here is how the exported code blocks look:
image

I’ve tried custom css, to no avail. Here are two variations I’ve tried:

@media print {
    pre, code {                                                                                                                           
        background-color: #f5f5f5; /* Your desired background color */                                                                         
        color: #000; /* Your desired text color */                                                                                             
    }
}  

@media print {                                                                                                                           
    background-color: #f5f5f5; /* Your desired background color */                                                                         
    color: #000; /* Your desired text color */                                                                                             
}

I put them in .obsidian/snippets/pdf_export.css, then enable the custom css in Settings.
The export is the same:
image

Default theme is better, but still not black on white:
image

Thanks for any help!

2

If you switch the Tomorrow Night Bright theme to light mode, you’ll see the same faint code block text. I think the theme is just not optimized for light mode (where PDF export gets its styling from).

That said, adding !important results in the correct output in my test vault using Tomorrow Night Bright. !importants are generally considered bad form to use except in rare cases, but I think they are fine for a PDF export snippet. We don’t need to worry about other CSS interactions or conflicts; we just want to override the theme’s styles for PDF export and be done with it.

@media print {
    pre, code {                                                                                                                           
        background-color: #f5f5f5 !important; /* Your desired background color */                                                                         
        color: #000 !important; /* Your desired text color */                                                                                             
    }
}

Hope this works for you.

1 Like