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:
sahilkhan09k
2026-03-11 12:37:09 +05:30
committed by GitHub
parent d7d67841b8
commit 9844ca4d54

View File

@@ -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;