ThemingJump to Props
Change the colors, the typography and much more.
This Button – with its variant set to 'primary' – is reading from the colors.primary part of the theme.
Theming with the ADAPT Design System is based on the Styled System Theme Specification. This is an emerging specification but we aim to stick closely to it for now.
Table of Contents:
If you don't need to customise the theme, just wrap your app in the AdaptThemeProvider and all components will have access to the default visual style. This is the recommended and default setup guideline.
Now you'll see the Button component with its colors referencing the colors.primary value of the theme.
If you need to either customize the theme or add new properties to be accessed via style props, use the themeOverrides prop on the theme provider.
In the below example, we're changing the primary/brand color from Bain red to Hot Pink.
Note that we aren't changing the button's color to pink; we're changing the primary color of the theme to pink so that the Primary Button now reads from a different color value.
In most cases, you'll probably want to change the primary color of your UI. By default the ADAPT Design System's primary color may not be desirable for all products, in which case you'd want to change the primary color to something else. See the above example for this.
You should avoid editing the values of colors in the default theme but you can add new colors that may be be missing to the theme.colors object in your theme override.
By default these colors can be referenced by the color, borderColor, backgroundColor, fill and stroke style props on any styled-system-based component.
💡Interested in Dark Mode?
To manage typographical options, the theme object supports these values: fonts (font families), fontSizes, fontWeights, lineHeights, letterSpacings.
If a designer's mockups contain values outside of these in the theme, have a conversation about why.
The theme object contains default breakpoints that are used for media queries used for responsive styles:
You don't often need to write media quaries to access these breakpoints. Instead, you use responsive styles. See the below example of how to use them:
I will change size as the screen width changes.
To change the breakpoints, add a breakpoints array to your theme override. These values will be used to generate mobile-first (i.e. min-width) media queries, which can then be used to apply responsive styles.
Note that the above example also reflects the theme default breakpoints.
Read more on the styled-system docs
The ADAPT Design System is built on the 8pt Grid System. Meaning all spacing should be a multiple of 8. The space key allows you to customize the global spacing and sizing scale for your project. By default these spacing value can be referenced by the padding, margin, and top, left, right, bottom styles.
The above padding references theme.space. Try it out by changing the values