GridComponent.saveAsPDF() exports with white text in dark mode

[Dan]

We recently implemented a new color theme and right after release we realized that PDF exports from our reports (courtesy of Kendo's Grid) are exporting with white text, so they cannot be read.

Application details: Large Angular app with a C# backend, all handwritten scss except for our Kendo controls where we lean heavily on Grid and Charts, grid on  our reports is @progress/kendo-angular-grid version 4.6.3, kendo-angular-pdf-export is 2.0.3 (not sure it's used; I don't see a reference, but the name made me think I should list it), Angular is 9.0.2. IDE is VS Code.

Things tried:

1. https://www.telerik.com/kendo-angular-ui/components/pdfexport/content-styling/ indicated that viewencapsulation must be disabled to support styling of the exported content. This is probably unacceptable for us anyway, but just in case, I tried it and added `kendo-pdf-export { color: #2d313b; }` to our report grid component that calls the save method. Removing view encapsulation resulted in the wrong colors for the report itself and no change to the exported PDF file. I also tried placing the element selector in ::ng-deep instead, to no effect.
2. I attempted adding `kendo-pdf-export { color: #2d313b; }` to a style tag on the index.html file to make sure it was present, but it wasn't helpful.
3. I tried replacing all var(--font-color-1) in the styles for our report component with currentColor since someone had a similar issue in https://www.telerik.com/forums/chart-colors-on-pdf-export but that seemed to be specific to charts, and didn't help.

[Svet]

Hi Dan,

Thank you for the provided details.

Indeed, the first point that you have listed is the way to go for this case. However, it seems that a slightly more specific CSS rule is required to target the Grid such as:

  
.k-pdf-export .k-grid{
    background-color: yellow;
    color: red;
}

That will allow to overwrite the default styles used by the Grid. Please check the attached example project demonstrating such approach. Please let me know in case that doesn't help or if any further assistance is required for this case. Thank you.

Regards,
Svetlin
Progress Telerik

[Dan]

Before looking back at this post, a co-worker suggested we use this selector in a global kendo styles override sheet we use, and it seems to work. The variable $text-color is just the light theme font color 1 regardless of which theme we have active.

// ensure PDF export works
.k-grid-pdf-export-element {
  width: 100%;

  color: $text-color;
  --font-color-1: $text-color;
}

[Dan]

We also did NOT turn off view encapsulation on that component as it would have been unacceptable for us, so this element seems like a good option.

[Svet]

Hi Dan,

I am glad that you managed to move forward with this case.

Indeed, if it is required to apply styles globally then adding the desired styles to the project root styles file is a proper implementation. The ViewEncapsulation.None option is required when it is needed to change the default styles of the used native Angular components such as any Kendo UI for Angular component. This option acts as if a global style is added. Please check the following article from the official Angular documentation on the topic:

https://angular.io/guide/component-styles#view-encapsulation

Regards,
Svetlin
Progress Telerik