Colors for embedded existing visuals

[apop880]

🐛 Bug report

Theming/colors appear to have some issues when it comes to embedding existing visualizations.

Steps to Reproduce

1. Create a visualization in Qlik Sense.
2. Embed using nebula.render({ element: elementId, id: vizId })

Expected behavior

Theming should honor what's set in theme file. For example, the straightTable section when embedding a table.

Actual behavior

If no palette is specified in a custom theme file (for example, when using the default theme), colors seem to be applied with little rhyme or reason. Here's an example of a cell being hovered in sn-table:

If palettes.ui[0].colors is defined at all, the color scheme appears to fallback to what is actually built for the visualization in Qlik. This is at least somewhat acceptable, but sometimes we want to be able to apply different theming in Qlik itself compared to in a third-party application.

After some trial and error, there seems to be random correlation between palettes.ui[0].colors[x] and a corresponding visualization color. For example, defining `palettes.ui[0].colors[2] modifies the hover color on an embedded table.

Versions

• nebula.js: (2.10.0)
• Platform: React
• Browser: Chrome

Additional context

Perhaps I'm doing something wrong, but if so, the documentation needs to be updated, because I've scoured the docs and source code to see where these values are being applied and have had little luck. I also tried setting properties in object.straightTable and that didn't appear to do anything for hover color, either (but it did work for other properties). Finally, I tried using properties on the visualization itself, as documented at https://qlik.dev/libraries-and-tools/visualizations/table. That only worked when I was creating a table ad-hoc, but it didn't work when embedding an existing visualization.

I did see this line of code:
// Note: Hover colors from Layout have a higher priority than those from theme.
https://github.com/qlik-oss/sn-table/blob/5df9bec1b204b22c92a551e34b76032988975e06/src/table/utils/styling-utils.js#L119

That would potentially explain why modifying object.straightTable did nothing, but it makes very little sense to me that:

• That only applies to hover colors and not other properties
• palettes.ui[0].colors can still act as a modifier