[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?