Plugins look broken in Dark Mode.

[btychon]

Team:Elasticsearch UI

Change description

If you standup Kibana 8.4.1 and run node ./scripts/generate_plugin.js, you'll notice that the boilerplate has an unusable UI when Kibana is switched into Dark Mode.

Which release will ship the breaking change?
8.0

Is this a Kibana or Elasticsearch breaking change?
Kibana

Describe the change. How will it manifest to users?
Plugins are unusable in Dark Mode because you'll often see light gray text on white backgrounds.

How many users will be affected?
A great majority of people in our organization(s) prefer using the plugin in Dark Mode.

Are there any edge cases?
If I try mimicking the approach taken by the EUI team in their sandbox I can wrap our top-level component with:
<EuiProvider colorMode="dark">

That mostly fixes the problem except that another unwanted side-effect occurs. That is, the plugin's content is vertically centered in the browser. If we can't get help on this issue before the next release, I may try wrapping the EuiProvider around our plugin and looking for a way to circumvent the CSS positioning issue. I'm just scared that other side effects will begin to manifest if I take this path.

I can't be sure what the problem is exactly, but the following observations should prove helpful.

• The rest of Kibana looks fine in Dark Mode so something changed specific to plugins and the way they are fed React Context from the EuiProvider which is declared above/outside of plugins.
• Wrapping the EuiProvider around the plugin's top level component seems to overwrite those lost/broken properties through React Context.
• This problem coincides with the push to CSS-in-JS Emotion (away from SASS).

Test Data

The main component affected seems to be the EuiPanel. There are other components which inherit from that one and they are equally uglified in Dark Mode. Hopefully there's a simple fix for the EuiPanel which will cascade and fix everything else.

Cross links

I first raised the issue with the EUI team. However they said they can't reproduce the issue in CodeSandbox and therefore will not provide further assistance.

[btychon]

This effectively solves the problem (change made in one of the plugin boilerplate files). Notice that the EuiProvider is a parent to KibanaContextProvider, so whatever interference is occurring inside of the context/theming originates at a higher level.

I actually moved the EuiProvider to the top level of application.tsx and set the JSX attribute with this argument in plugin.ts -> core.application.register

const isDarkTheme = core.uiSettings.get('theme:darkMode');

Still I'd like our plugin to mirror the boiler plate's approach to make things more future proof. Any help on the matter would be appreciated.

[elasticmachine]

Pinging @elastic/kibana-operations (Team:Operations)

[Dosant]

(assigned to operations because according to code owners they own the packages/kbn-plugin-generator)

[Dosant]

@btychon, here is the issue were was documented how we migrated to the new theming approach: #118866 . I hope it would answer your questions on how to properly set this up manually in your plugins.

the plugin generator probably should be updated to follow the approach