EUI Panels have a white background and EUI Callouts have no background color in Kibana 8.x "Dark Mode".

[btychon]

Components such the EUI Card are derivatives of an "EUI Panel" and panels do not properly adapt when Kibana is switched to Dark Mode. We're developing a Kibana Plugin and the UI became unusable when we upgraded from 7.14.3 to 8.4.1.

New CSS class names are observed on the Panel DIV's such as css-1mfocz8-euiPanel-grow-m-m-plain-hasShadow-isClickable. It appears to be a consequence of migrating EUI away from SASS to CSS-in-JS.

EUI Callouts in ELK 7.14.3 have a class euiCallOut--primary which puts a dark blue background color on the DIV in Dark Mode. In 8.4.1 the static class name was replaced with a dynamic one, css-1mwxeb8-euiTitle-xxs-euiCallOutHeader-primary , and it contains no background color (making it transparent).

There are similar problems with form controls. I won't go into every issue but wanted to bring it to someone's attention EUI's behavior changed when changing themes.

[miukimiu]

Hi @btychon,

The euiCallOut--primary should be replaced with css-d5yzab-euiPanel-none-m-primary-euiCallOut which contains the background color.

The class name you mentioned in a correct implementation would be applied for the callout title:

css-1mwxeb8-euiTitle-xxs-euiCallOutHeader-primary , and it contains no background color (making it transparent)

So it seems that is something wrong with your implementation. If you test the EuiCallout in dark mode they're working. And you can see a background color being applied:

.css-d5yzab-euiPanel-none-m-primary-euiCallOut {
    -webkit-box-flex: 0;
    flex-grow: 0;
    padding: 16px;
    background-color: rgb(11, 32, 48);
}

[btychon]

All that I did was use the plugin generator and view the boiler plate in Dark Mode here.

[btychon]

When I add vanilla callouts inside and outside of the EuiPageContent they render in Light Mode. I'm not sure why I was getting a transparent background yesterday in the callout because I can't reproduce it any more in our plugin or the boilerplate... strange one.

This is how callouts used to look in Dark Mode.

[miukimiu]

It's difficult to tell what's the issue. It seems that for some reason your plugin is not inheriting properly the EuiThemeProvider colorMode="dark".

In ELK 8.4.1 the EUI version is 60.30.0 and I tried to replicate your code in a CodeSandbox and the callouts inside and outside of the EuiPageContent are getting the right colors:

.

Notice that in the CodeSandbox index.js the EuiProvider has the colorMode="dark" and import "@elastic/eui/dist/eui_theme_dark.css";.

So I'm closing this issue because it seems that there is something wrong with the implementation and I can't replicate it.

In case you can replicate your issue with a CodeSandbox, we can reopen the issue.

[btychon]

Thanks for that sandbox link! That rules out a lot.