Skip to content

Comments

fix(theme-classic): do not switch color modes when printing#6490

Merged
Josh-Cena merged 3 commits intomainfrom
jc/fix-print-color
Jan 28, 2022
Merged

fix(theme-classic): do not switch color modes when printing#6490
Josh-Cena merged 3 commits intomainfrom
jc/fix-print-color

Conversation

@Josh-Cena
Copy link
Collaborator

@Josh-Cena Josh-Cena commented Jan 28, 2022 •
edited
Loading

Motivation

Fix #6479.

We probably misunderstood the issue. The actual offending place is the media query listener. You can try with this minimal HTML:

<body>
  <script>
    window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
      console.log('dark', e.matches);
      console.log('print', window.matchMedia('print').matches);
    });
  </script>
</body>

When you press print, the PCS is coerced to light mode during printing, but then it was switched back to dark mode. This is because when printing, the browser wants the app to behave like it's in light mode. So the actual fix is to get rid of this fluctuation.

Problem is, which behavior do we actually prefer? Coercing the entire app to light mode when printing (and make the print result always look like light mode), or respect the current color mode? However, previously, printing in dark mode results in bad colors anyways (lighter theme color on a white background), so at least there isn't a regression with this change...

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Follow the repro steps in #6479; now when printing in dark mode, no changes are made.

@Josh-Cena Josh-Cena added the pr: bug fix This PR fixes a bug in a past release. label Jan 28, 2022
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Jan 28, 2022
@netlify
Copy link

netlify bot commented Jan 28, 2022 •
edited
Loading

✔️ [V2]

🔨 Explore the source changes: 221fadf

🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/61f38cb04635ba0008098588

😎 Browse the preview: https://deploy-preview-6490--docusaurus-2.netlify.app

@github-actions
Copy link

github-actions bot commented Jan 28, 2022 •
edited
Loading

⚡️ Lighthouse report for the changes in this PR:

Category Score
🟠 Performance 69
🟢 Accessibility 100
🟢 Best practices 100
🟢 SEO 100
🟢 PWA 92

Lighthouse ran on https://deploy-preview-6490--docusaurus-2.netlify.app/

@github-actions
Copy link

github-actions bot commented Jan 28, 2022 •
edited
Loading

Size Change: +166 B (0%)

Total Size: 755 kB

Filename Size Change
website/build/assets/js/main.********.js 573 kB +166 B (0%)
ℹ️ View Unchanged
Filename Size
website/.docusaurus/globalData.json 47 kB
website/build/assets/css/styles.********.css 105 kB
website/build/index.html 30.1 kB

compressed-size-action

@Josh-Cena Josh-Cena changed the title fix(theme-classic): coerce to light theme when printing fix(theme-classic): do not switch color modes when printing Jan 28, 2022
slorber
slorber approved these changes Jan 28, 2022
View reviewed changes
Copy link
Collaborator

@slorber slorber left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

What about always printing in light mode?

But probably in another PR
We don't render well dark mode anyway 🤷‍♂️
It's worth also testing on sites that only have a dark mode to be sure it works nicely in all cases. We might as well fix the rendering in dark mode

@Josh-Cena
Copy link
Collaborator Author

Josh-Cena commented Jan 28, 2022

Yeah, if you test it, both in deploy preview and production, printing in dark mode results in terrible colors. I guess sites with only dark mode don't expect people to print them anyways, and even if we coerce to light mode, some colors are going to be terrible for them.

I didn't figure out a nice way to update theme colors before printing. It seems as soon as you press print, the browser has already taken a snapshot of the page so further JS modifications are ignored.

@Josh-Cena Josh-Cena merged commit c99026c into main Jan 28, 2022
@Josh-Cena Josh-Cena deleted the jc/fix-print-color branch January 28, 2022 12:19
@slorber slorber mentioned this pull request Mar 13, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@slorber slorber slorber approved these changes

@lex111 lex111 Awaiting requested review from lex111

Assignees

No one assigned

Labels

CLA Signed Signed Facebook CLA pr: bug fix This PR fixes a bug in a past release.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Switching to 'Dark Mode' by itself when window.print() is called on Chrome

3 participants

@Josh-Cena @slorber @facebook-github-bot