Colors are Not Printed Properly using SLDS in Visualforce

Question

I have a Visualforce page styled using SLDS elements. I am facing an issue with colors not being visible when we are printing the HTML page. I believe this may be caused due to print styles being applied by the Lightning Design System (I am referring to the CSS media print queries).

Is there any way to print colors by overriding the CSS media print query, or do we need to create our own custom CSS for printing the page?

Here is a sample of the standard data table markup:

<div class="slds-scope">
  <table class="slds-table slds-table_bordered slds-table_cell-buffer">
    <thead>
      <tr class="slds-text-title_caps">
        <th scope="col">
          <div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
        </th>
        <th scope="col">
          <div class="slds-truncate" title="Account Name">Account Name</div>
        </th>
        <th scope="col">
          <div class="slds-truncate" title="Close Date">Close Date</div>
        </th>
        <th scope="col">
          <div class="slds-truncate" title="Stage">Stage</div>
        </th>
        <th scope="col">
          <div class="slds-truncate" title="Confidence">Confidence</div>
        </th>
        <th scope="col">
          <div class="slds-truncate" title="Amount">Amount</div>
        </th>
        <th scope="col">
          <div class="slds-truncate" title="Contact">Contact</div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row" data-label="Opportunity Name">
          <div class="slds-truncate" title="Cloudhub">
            <a href="javascript:void(0);">Cloudhub</a>
          </div>
        </th>
        <td data-label="Account Name">
          <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
        </td>
        <td style="background-color : green" data-label="Close Date">
          <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
        </td>
        <td data-label="Prospecting">
          <div class="slds-truncate" title="Prospecting">Prospecting</div>
        </td>
        <td data-label="Confidence">
          <div class="slds-truncate" title="20%">20%</div>
        </td>
        <td data-label="Amount">
          <div class="slds-truncate" title="$25k">$25k</div>
        </td>
        <td data-label="Contact">
          <div class="slds-truncate" title="[email protected]">
            <a href="javascript:void(0);">[email protected]</a>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row" data-label="Opportunity Name">
          <div class="slds-truncate" title="Cloudhub + Anypoint Connectors">
            <a href="javascript:void(0);">Cloudhub + Anypoint Connectors</a>
          </div>
        </th>
        <td data-label="Account Name">
          <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
        </td>
        <td data-label="Close Date">
          <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
        </td>
        <td data-label="Prospecting">
          <div class="slds-truncate" title="Prospecting">Prospecting</div>
        </td>
        <td data-label="Confidence">
          <div class="slds-truncate" title="20%">20%</div>
        </td>
        <td data-label="Amount">
          <div class="slds-truncate" title="$25k">$25k</div>
        </td>
        <td data-label="Contact">
          <div class="slds-truncate" title="[email protected]">
            <a href="javascript:void(0);">[email protected]</a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

I facing the issue specifically on this markup:

<td style="background-color : green" data-label="Close Date">
   <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
</td>

For this example, I have only one cell colored. Practically, we may have many cells with different colors.

In order to replicate the issue, one can click Ctrl + p to open the print preview dialog.

Answer 1

On Visualforce pages, if you use the apex:slds component, the resulting Lightning Design System (SLDS) stylesheet applies the following styles to the document via the @media print query:

@media print {
    .slds-scope *,
    .slds-scope *:before,
    .slds-scope *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
}

As you can see, the background property is set to transparent when printing and uses the !important rule to override any other declarations.

You can override this default styling by incorporating the !important rule in your own custom CSS (place this after the apex:slds component on your Visualforce page to ensure specificity is calculated according to your wishes):

@media print {
    .slds-scope td {
        background-color: green !important;
    }
}

Lastly, make sure you enable Background Graphics in your browser's printer settings, as many of the print settings are outside of the realm of CSS and at the browser level: