CodeBlock theme option

[chetanmajithiya]

CodeBlock require theme options like Dark, Light on any base Main theme ?

[elizabetdev]

The EuiCodeBlock or any other EUI components requires you to import a compiled CSS file our multiple SASS files.

Currently, we support 4 themes. The EuiCodeBlock or any other EUI component adapts its colors and sizes according to the theme you're consuming:

• theme_light (the default EUI theme)
• theme_dark (the same theme in dark)
• theme_amsterdam_light (the next iteration of the EUI light theme)
• theme_amsterdam_dark (the next iteration of the EUI dark theme)

[chetanmajithiya]

@miukimiu i think you didn't get my question!
i asking about theme props to <EuiCodeBlock />, to make it this part Dark or Light on any theme,
for example https://elastic.github.io/eui/#/layout/header in Dark theme section theme="dark"

(<EuiCodeBlock theme="dark" />)

[elizabetdev]

@chetanmajithiya got it!

The <EuiCodeBlock /> doesn't have any theme prop. The EuiHeader is the only component that allows changing the theme by passing a prop like the way you mentioned theme="dark.

All the other components don't have this feature. But if it's something you think would make sense, you can open a feature request: https://github.com/elastic/eui/discussions/new.

[cchaos]

We now have an open ticket #4385 for this discussion question, so I'll close this out. The option will be easiest to implement when we switch to using Emotion.

[cee-chen]

Just to elaborate on the final decision for this, components will not support custom theming, instead wrap them in an <EuiThemeProvider>.