Dark vertical strip appears on right side when printing in dark mode #2959
Zak Siddiqui opened 2 days ago

Description

When printing a Markdown page while the application is in dark mode, a dark vertical strip appears on the right-hand side of the printed page. This strip does not appear when printing in light mode, where all content renders correctly.

Expected Behavior

  • In dark mode, printed output should still render with black text on a white background (consistent with light mode printing).
  • No dark or colored strips should appear on any edge of the printed page.

Actual Behavior

  • In dark mode, everything prints as expected (black text on white background) except for a dark vertical strip on the right-hand side of the page.

Steps to Reproduce

  1. Enable dark mode in the application.
  2. Open any Markdown page.
  3. Initiate a print (e.g., Ctrl+P / Cmd+P).
  4. Observe the printed output or print preview — note the dark strip on the right edge.

Environment

  • Application/version: 16.3.4
  • Browser: Edge
  • OS: MacOS

Possible Cause (from analysis)

The dark vertical strip is likely caused by CSS background colors from the dark theme being carried into the print output, specifically on an element that extends beyond the main content area.

Common scenarios:

  1. Dark mode sets a dark background on a high-level container (e.g., body, #root, or a main wrapper) using a rule like:

    body { background-color: #1e1e1e; }
    

    When printing, the browser may include this background color if print-color-adjust: exact is set, or if the print stylesheet does not explicitly override it.

  2. The dark vertical strip on the right often appears when a container has:

    • A min-height: 100vh (or similar) so it covers the full page height.
    • A width: 100vw or a negative margin/overflow that makes the background extend slightly beyond the printable content area.
    • A scrollbar track or a ::before/::after pseudo-element that carries the dark background and ends up on the printed page.

Suggested Fix

  • Ensure all dark mode background colors are overridden in the print stylesheet to white or transparent.
  • Add @media print rules to reset background colors on high-level containers.

Additional information

This occurs not only in markdown files but also when we want to print an issue as well, and I should guess perhaps also pull requests and other pages.

Impact

The dark strip results in excess consumption of printer toner, which is not good for the budget and also not good for the environment.

Screenshot

image.png

1/1
Type
Improvement
Priority
Normal
Assignee
Labels
No labels
Issue Votes (0)
Watchers (2)
Reference
OD-2959
Please wait...
Connection lost or session expired, reload to recover
Page is in error, reload to recover