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".