Theming

Extend Theme#

Default theme can be extended with extend prop which can be added to AdaptUIProvider.

To extend or override a token in the default theme simply add a new file adaptui.config.js & export a theme object. Use a extend key to extend a theme token or simply to overwrite a token in the default theme object, create a new object of same name like how it is done in Tailwind customization.

For example, if you want to add a new color variant to the button you can as follows:

Now inside your <AdaptUIProvider> you can use extend prop to pass the exported theme object. If you haven't already set up the provider you can refer this guide.

<AdaptUIProvider extend={theme}>
  <App />
</AdaptUIProvider>

// Now you can use these colors in your components
<Button variant="tertiary">Welcome</Button>

If you are wondering about which keys of the theme you can extend you can look at the source code of the default theme file.

Custom Theme#

If you need to provide the default styling for any components, you can do so by creating a theme file and exporting it.

Our AdaptUIProvider accepts a theme prop which can be used to provide a custom theme of your choice.

<AdaptUIProvider theme={theme} extend={extendTheme}>
  <App />
</AdaptUIProvider>