High contrast mode Beta
The
highContrastMode determines and sets certain un-overrideable modifications to the EUI theme, primarily around borders and shadows. Borders will always be pure black or white (depending on the color mode), and shadows will be entirely replaced with borders.
By default, if this prop is not passed, EuiProvider will detect and use the user's system contrast preferences.
Rendering a specific contrast mode
While it's usually best to keep all high contrast mode the same across your app for visual consistency, some instances may benefit from an exaggerated change in contrast. For this you can set EuiThemeProvider's highContrastMode to true.
In general, we do not ever recommend manually turning off high contrast via highContrastMode={false}. Respect the user's contrast preferences where possible.
Forced contrast themes and colors
Please note that some OSes and browsers have something called
forced colors mode, which overrides all colors, backgrounds, borders, and shadows. An example of this is Windows High Contrast modes.Since this is done at a level that EUI can do nothing about, if forced colors mode is detected by EuiProvider, EUI will ignore any passed highContrastMode or colorMode prop, as this user choice and system setting takes precedence.
To quickly test your application in forced colors mode without switching OS themes, you can use Chrome or Edge's devtools to emulate forced-colors mode.
Reacting to user high contrast modes
The detected or current highContrastMode is available via useEuiTheme(). It returns either "forced", "preferred", or simply false. You can use this information to (for example) conditionally render or opt out of rendering certain styles or colors.