Bain Logo

Color Modes

Jump to Props

Provide an alternate color mode.

All components in the ADAPT Design System can be presented in both "light" and "dark" color modes. Dark Mode is an opt-in feature and you can also style your entire app using it.

Give it a go:

Table of Contents:

Basic Usage


Creates a ColorModeContext using React's Context API to provide the current color mode to the AdaptThemeProvider.


A function used to get the colorMode value from either the user's prefers-color-scheme: dark setting or the entry set in localStorage once the setting has been toggled once.

How it works

Switching color modes basically replaces the color palette of the underlying theme object. Just as the ADAPT Design System provides a default theme, it also provides a default dark mode theme.

Toggling color modes: How To

  1. Ensure your app is wrapped in the <ColorModeProvider>.
  2. Somewhere inside your app, implement an action that triggers the toggleColorMode function which is accessed via <ColorModeContext.Consumer>.

Example toggle:

Large Title

Article Title

2 days ago

Short excerpt of the article to inrigue and lure you into reading more. Short excerpt of the article to inrigue.








Customize your own dark theme: How To

Pass in the following object to the AdaptThemeProvider:

Color roles

As is generally good practice, most colors in the ADAPT Design System theme are based on role rather than color name. "Primary" for instance represents the main brand red color.

With in dark mode, this is especially important. For example, when styling text – its color would usually be inverted when switching from light to dark. In this case, we say that <Text color='text' /> and we define text as black in normal (light) mode, and white in dark mode.

Below is an overview of the core color names that you can set the value of for both default and dark color modes.

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy