Vaadin Charts Theming

It appears that charts do not respect the current theme. If I am using Lumo theme, for example, the background of all charts is white (“#ffffff”) and switching between light and dark theme changes nothing on the chart. It does not appear to be an easy task to make this work. Am I missing something? I cannot find good examples, and it seems that this would be a significant enough issue that Vaadin developers would provide a simpler mechanism to make it work.

On what version are you?

Dark mode support was added in version 23, if I recall correctly

I am on the most current stable version, i.e. 23.2.0. My app is based on the Vaadin starter, so it creates a custom them, named “myapp”. I am not importing anything special, not overriding any charts css or anything like that. Do I need to import anything additional? I am using stock charts from the vaadin-core package (I have a dev subscription)

The problem is most noticeable with dark theme, but it doesn’t appear to work in either light or dark. Light has a “lighter” default background color, but regardless of theme all charts have a bright white background. I have looked at the html in the browser and it appears that the “rect” of the background always has a fill value of “#ffffff”. I am assuming highcharts is doing that. The class name is “highcharts-background” but if the fill is explicitly set as “#ffffff” would that take priority?

Sounds like something is wrong with your code. It’s working as expected if you e.g. open the docs with a browser that enabled dark mode

It appears the problem is when you create a custom theme. The Vaadin starter app creates a custom theme (“myapp”) which appears to inherit everything from Lumo, but the in order to make charts respect styling changes I had to create a css file outside of the theme and import that directly using a @CssImport. Is there something that needs to be done to a custom theme to make it inherits charts that will work by default? Does something need to be added to the theme.json file? Nothing is wrong with my code, and I do have a commercial subscription

If you create an app using your charts should look like this. (Selected dark mode and added the dashboard view) - it works out of the box

Adding a css file directly to the chart and (guess) with setStyledMode(true) isn’t going to work tho