Allow turning on dark mode for individual components.

[nreese]

Maps would like to style its tooltips with euiToolTipStyle mixin to provide a more cohesive UI in dashboard and canvas, elastic/kibana#75758. Maps uses EuiPopover for its tooltip because it has interactive components like select and buttons. Maps does not want to stop using EuiPopover. Maps just wants to style the existing components so they are similar to lens and visualize tooltips. To accomplish this, maps needs a way to turn on dark mode for all components in the EuiPopover.

[nreese]

Below is a screen shot from a POC of aligning the visual style of the tooltips. Notice how the select, buttons, and EuiPagination in the tooltip need to have dark mode styling to look correct in the tooltip.

[cchaos]

This is an example of something of a feature we are looking to add during our CSS in JS effort. And, really, is the only way we'll be able to properly accomplish this. The cascade effect of being able to tell all the children of a popover to then swap to it's dark theme counterpart is not something easily done with how we currently build our components with SASS.

We have a meta ticket going for our CSS in JS effort #3912 where you can track the idea of a <ColorMode>. But while we will build out the ability to use this, the conversion of all EUI components will take close to a year.

---

For this very specific example (tooltip styling of popover), the design team actually highly recommend not doing this. It breaks the consistent paradigm of users understanding that dark tooltips don't have interactive content in them and that they're primarily for displaying additional information. The chart usages in Kibana only use the tooltip to display the data contained within that piece, but end up using an EuiPopover for drilldowns

[elizabetdev]

Closing in favor of #3912.