[APM] Support EUI darkmode

[sorenlouv]

Switch between lightmode and darkmode depending on chrome.getUiSettingsClient().get('k7design')

To import dark mode:

import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';

Infra solution:

kibana/x-pack/legacy/plugins/infra/public/apps/start_app.tsx

Lines 53 to 57 in d8a5765

	<EuiThemeProvider darkMode={darkMode}>
	<HistoryContext.Provider value={history}>
	<PageRouter history={history} />
	</HistoryContext.Provider>
	</EuiThemeProvider>

Notes:

• @mattapperson has also set up variables alongside styled-components, and he may have insights to share
• @pugnascotia offered to walk us through how they've done theming in cloud

[elasticmachine]

Pinging @elastic/apm-ui

[jasonrhodes]

I like how infra has done this using React context (#29133). If we want to imitate, we need to:

1. Wrap the application with a new ThemeProvider which makes all of EUI's variables available via a prop, and will load light or dark mode vars depending on the theme UI setting (note: I like how Infra also includes the "dark mode" boolean here too so that custom color solutions can use the same theme consumer to make color decisions that can't be easily replaced with EUI)
2. Replace all imports from '@elastic/eui/dist/eui_theme_light.json' with the new Theme Consumer

@sqren @ogupte @formgeist if you all are ok with this strategy, I'll update the ticket. Once this is done, fixing the remaining dark mode issues should become much easier.

[formgeist]

@jasonrhodes Sounds good to me 👍

[sorenlouv]

I also like how Infra solved it. ThemeProvider seems like the way to go for styled-components 👍

@jasonrhodes did you think of a way to access theme variables outside styled-components, eg.

kibana/x-pack/plugins/apm/public/store/selectors/chartSelectors.ts

Line 151 in 8d4f1d3

color: theme.euiColorVis1,

[sorenlouv]

Succeeded by #30048