Color mode
EUI is transitioning to a CSS-in-JS solution for theming and requires consuming/customizing global variables in both the Sass and CSS-in-JS methods. To track this effort, subscribe to the
Meta ticket.Color mode
The
colorMode determines which values to return based on LIGHT or DARK mode.colorMode:LIGHT
Rendering a specific color mode
While it is usually best to keep all consumptions of the global variables rendering in the same light or dark color mode, some instances benefit from an exaggerated change in contrast from the current theme. For this you can specify EuiThemeProvider's colorMode to always be "light", "dark", or "inverse" which sets it to the opposite of the current color mode.
When nesting or overriding EuiThemeProvider, a wrapping <span> element that sets the correct default text color (normally set at the global <body> level) will be rendered. You can customize the display of this wrapping element by passing wrapperProps.
Alternatively, if a wrapper will significantly impact the DOM layout/flow of your content, and if your child is a single React component, you may pass wrapperProps={{ cloneElement: true }} to avoid rendering an extra wrapper and to clone the correct color classes onto your child content.
Using color tokens in a specific color mode
The following example demonstrates how you can use color tokens in any of the color modes: "light", "dark", or "inverse".