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
Enable dark mode in the application.
Open any Markdown page.
Initiate a print (e.g., Ctrl+P / Cmd+P).
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:
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.
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.
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
Actual Behavior
Steps to Reproduce
Environment
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:
Dark mode sets a dark background on a high-level container (e.g.,
body,#root, or amainwrapper) using a rule like:When printing, the browser may include this background color if
print-color-adjust: exactis set, or if the print stylesheet does not explicitly override it.The dark vertical strip on the right often appears when a container has:
min-height: 100vh(or similar) so it covers the full page height.width: 100vwor a negative margin/overflow that makes the background extend slightly beyond the printable content area.::before/::afterpseudo-element that carries the dark background and ends up on the printed page.Suggested Fix
whiteortransparent.@media printrules 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