Vaadin-Charts won´t apply all CSS styles on export/download

Question

We have a few Vaadin charts (Pro) on our dashboard, which have been styled via CSS (font color, font size, bar colors,...). These CSS files are not on the system, but are loaded from an external server using @Stylesheet([URL]) in my Java-Class. The charts are built with Java. Everything is displayed correctly, but when using the built-in export function via the interface, not all styles are used. We are using Vaadin14. Does anyone here have an idea/solution?
[This is how it looks on our dashboard][1]
[This is how the downloaded chart looks like][2]
[This is the contextmenu][3]
As you can see, among other things, the bar colors and the font size are not applied correctly.

:host(.ChartDatenschutz) .highcharts-color-0, :host(.ChartDatenschutzTOM) .highcharts-color-0 {
  stroke: var(---kl-highcharts-fortschritt-color-00);
                fill: var(---kl-highcharts-fortschritt-color-00);
}

:host(.ChartDatenschutz) .highcharts-data-label-color-0 text, :host(.ChartDatenschutzTOM) .highcharts-data-label-color-0 text {
  fill:var(---kl-red-color);
                font-weight: 600;
}

:host(.ChartDatenschutz) .highcharts-color-1, :host(.ChartDatenschutzTOM) .highcharts-color-1 {
  stroke: var(---kl-highcharts-fortschritt-color-01);
                fill: var(---kl-highcharts-fortschritt-color-01);
}

:host(.ChartDatenschutz) .highcharts-color-2, :host(.ChartDatenschutzTOM) .highcharts-color-2 {
  stroke: var(---kl-highcharts-fortschritt-color-02);
                fill: var(---kl-highcharts-fortschritt-color-02);
}

:host(.ChartDatenschutz) .highcharts-color-3, :host(.ChartDatenschutzTOM) .highcharts-color-3 {
  stroke: var(---kl-highcharts-fortschritt-color-03);
                fill: var(---kl-highcharts-fortschritt-color-03);
}

:host(.ChartDatenschutz) .highcharts-color-4, :host(.ChartDatenschutzTOM) .highcharts-color-4 {
  stroke: var(---kl-highcharts-fortschritt-color-04);
                fill: var(---kl-highcharts-fortschritt-color-04);
}

:host(.ChartDatenschutz) .highcharts-color-5, :host(.ChartDatenschutzTOM) .highcharts-color-5 {
  stroke: var(---kl-highcharts-fortschritt-color-05);
                fill: var(---kl-highcharts-fortschritt-color-05);
}

:host(.ChartDatenschutz) .highcharts-data-label-color-5 text, :host(.ChartDatenschutzTOM) .highcharts-data-label-color-5 text {
  fill: var(---kl-white-color);
}

:host(.ChartDatenschutz) .highcharts-legend-item, :host(.ChartDatenschutzTOM) .highcharts-legend-item {
  fill: var(---kl-text-color);
}

(Part of the CSS)
The styles come from an external design team, which means I don't have direct access to the files. However, I can let them know if something needs to be changed.
Thanks in advance

Answer 1

CSS styling of exported charts is not supported in Vaadin 23.0: https://vaadin.com/docs/latest/ds/components/charts/svg-generator/#customizing-svg-generation

CSS styling is not supported when exporting a chart as SVG.