Describe the bug
The chart is currently rendered on a transparent background. We have two main themes, one for a light background and one for a dark one.
The issue comes out when the user wants to apply a different color to the background: the existing themes are no longer valid in every case for an AA accessibly point of view.
Moreover, the legend is rendered in html that means that it only currently reflect the colors applied through importing the correct CSS method.

A possible solution is:

• apply colors of the chart only through the Theme js object, including the text color of the legend
• configure the background color through a Settings prop, this will allow us to tweaks the colors for a better contrast, and also return the current WCAG accessibility level if required.

To Reproduce
Steps to reproduce the behavior:

1. Go to the playground
2. Manually change the background color of the chart element in the playground css
3. Apply the light theme or the dark one
4. The text contrast is not sufficiently high with every background color applied

Expected behavior
The light and dark theme should be revisited as a semantic theme, that applies in all possible cases adapting the colors to the background.
A similar approach should be applied to #238

Screenshots
with light theme:

with dark theme:

Kibana Cross Issues

• TSVB does not take into account background color for legend styling kibana#60011

Checklist

• every related Kibana issue is listed under Kibana Cross Issues list
• kibana cross issue tag is associated to the issue if any kibana cross issue is present