mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-03-23 07:40:46 +08:00
fix(editor): ensure code and quote blocks render correctly in print (#14613)
Fixes #14608 ## Summary Fix printing issues when exporting documents while using the dark theme. Previously, when printing or saving a document as PDF in dark mode, text color was forced to black while some block containers (such as code blocks and quotes) retained their dark backgrounds. This resulted in **black text on dark backgrounds**, making the content unreadable in the exported PDF. ## Changes * Reset relevant CSS variables in the `@media print` section of `print-to-pdf.ts`. * Ensure block containers such as **code blocks and quotes** render with light backgrounds during printing. * Maintain readable text colors by forcing text color to black for print output. This approach updates the **CSS variables used by BlockSuite components**, ensuring that elements relying on variables like `--affine-background-code-block` and `--affine-quote-color` correctly switch to light backgrounds in print mode. ## Result Documents printed or exported as PDF from dark mode now render correctly with: * readable text * proper light backgrounds for code blocks and quotes * consistent formatting in print output <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Enhanced print-to-PDF styling for improved visual presentation of code blocks, quotes, and borders when exporting or printing documents to maintain better readability and consistency. <!-- end of auto-generated comment: release notes by coderabbit.ai --> Co-authored-by: sahilkhan09k <sahilkhan392005@gmail.com>
This commit is contained in:
@@ -49,6 +49,9 @@ export async function printToPdf(
|
||||
--affine-background-primary: #fff !important;
|
||||
--affine-background-secondary: #fff !important;
|
||||
--affine-background-tertiary: #fff !important;
|
||||
--affine-background-code-block: #f5f5f5 !important;
|
||||
--affine-quote-color: #e3e3e3 !important;
|
||||
--affine-border-color: #e3e3e3 !important;
|
||||
}
|
||||
body, [data-theme='dark'] {
|
||||
color: #000 !important;
|
||||
|
||||
Reference in New Issue
Block a user