Customize theme

If you need to customize the default styling for any components, you can do so by extending the DefaultTheme

Extending theme tokens#

Our RenderlesskitProvider accepts a theme prop which can be used to extend the theme.

To extend or override a token in the default theme simply add a new theme object (we called it customTheme) and inside of that create a new extend property and assign all your overrides to it.

For example, if you want to add a new red variant to the button you can do this:

If you are wondering about which keys of theme you can extend you can look at the source code for each specific theme file

Or if you have setup typescript you can also get autocompletion of those theme keys, checkout TypeScript Guide.