Theme provider
While
EuiProvider should not be wrapped around your application root more than once, you may use multiple nested EuiThemeProviders to customize section-specific or component-specific color modes or theme overrides.EuiThemeProvider
The context layer that enables theming (including the default theme styles) comes from
EuiThemeProvider. EuiThemeProvider accepts four main props (all of which have default values and are therefore optional):
theme:Raw theme values. Calculated values are acceptable.modify:Accepts an object of overrides for theme values.- For examples of this prop, see Simple instance overrides below.
colorMode:Accepts 'light', 'dark', or 'inverse'.- For usage, see the Color mode page.
highContrastMode: Accepts a true/false boolean.- For usage, see the High contrast mode page.
To use the default EUI theme, no configuration is required.
colorMode:LIGHThighContrastMode:falseConsuming with the React hook
Using the React hook useEuiTheme() makes it very easy to consume the EUI static and computed variables like colors and sizing. It simply passes back an object of the current theme which includes:
euiTheme:All the calculated keys including any modificationsmodifications:Only the modification keyscolorMode:Either 'LIGHT' or 'DARK'highContrastMode:Either 'forced', 'preferred', orfalse
When consuming the theme's keys like euiTheme.colors.primary, you'll want to pass them via the css property to take advantage of Emotion's compilation.
Consuming with the React HOC
When using inside of a React Component, you can wrap your exported component with withEuiTheme().
Consuming with Emotion's theming
EuiThemeProvider by default sets an Emotion theme context with the results of useEuiTheme(). This is a syntactical sugar convenience that allows you to take advantage of Emotion's styled syntax, or use a function in the css prop.
If you prefer to use or access your own custom Emotion theme, you can completely override EUI's passed theme at any time with your own ThemeProvider.
Simple instance overrides
Usually, you won't need to actually override an EUI theme variable at the instance level. Instead, you'd just create a new variable local to that component. However, if you cannot alter the component that is using the EUI variable then you can wrap that component with the EuiThemeProvider and pass your custom object to modify.
Creating custom keys
Because of the computed values and possible cascade effects, it may not be advisable to locally override any EUI specific theme variables. Instead, you should append custom keys to the theme.