[APM] Dark mode issues in APM UI components

[formgeist]

Summary

Depends on: #29725

This issue is meant to track the issues we're facing with dark mode in our current styled components in APM UI.

Basic implementation:

import { EuiThemeProvider } from '../../../observability/public/typings/eui_styled_components';

function bootstrapApp() {
  const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
  return (
    <EuiThemeProvider darkMode={darkMode}>
      <App />
    </EuiThemeProvider>
  );
}

function MyComponent() {
  const CustomLink = styled(EuiLink)`
    margin-right: ${({ theme }) => theme.eui.euiSizeS};
  `;
}

Fixed issues

Fixed in #69362 & #69493

• Timeline: X-axis background is hardcoded to white - Fixed in [APM] UI Dark theme fixes #38840

• Timeline: Span row hover is white

• Timeline: Span row lines and vertical markers are white

• Stacktrace source code boxes have white background

• Errors detail: Error occurrence panel has white border

• Contextual info table: Row lines are white

• Service map: The entire map does not support the dark mode theme, but some controls are converted.

• Unsaved changes count in the Agent configuration edit state shows always dark text - Fixed in [APM] Settings - Agent configuration: Change the unsaved changes text color #69493

Open issues

• Timeline: Transaction duration end value is consistently black (issue [APM] Trace timeline: Y-axis end time enhanced value does not support dark mode #76851)

• Charts: X-axis and gridlines are light grey/white instead of darker grey

• Charts: X-axis ticks on distribution barchart are also light grey instead of dark

• Charts: Time selection colour is black

• Search bar: Suggestions list items are not converted properly (issue [APM] Search suggestions box support for dark mode #76850)

• DB query codeblock (issue [APM] Convert DB statement code box to EuiCode #76849)

[elasticmachine]

Pinging @elastic/apm-ui

[formgeist]

@jasonrhodes Made this issue to track many of the theming issues we have with our APM UI components when switching to dark mode in Kibana.

[fdartayre]

Stack trace uses black font in both Error occurrence and Span details:

[mitchelldavis44]

Any update on this issue?

[formgeist]

Added another dark mode issue, as the Service map feature is not supported.

[smith]

Fixed by #69362.

[smith]

#70161 is related technical debt though not currently a visible issue.

[graphaelli]

Can we close this out as resolved now?

[formgeist]

@graphaelli Still a bunch of open issues, but we can choose to convert to separate issues if that's preferred?

[graphaelli]

No need to split right now. I don't want to create busy work of splitting this up for no reason - if we're still tackling them then as-is is fine. If there is a separation of short and long term then I think it would be helpful to split those up following the next release.

[formgeist]

No need to split right now. I don't want to create busy work of splitting this up for no reason - if we're still tackling them then as-is is fine. If there is a separation of short and long term then I think it would be helpful to split those up following the next release.

We can close this issue now because I split out the ones that are not related to the charts. Seeing as we're planning to replace the react-vis visualizations with Elastic Charts, I find that these will be resolved by the switch. The remaining have separate issues as there are new components that we can make use of.