Creating a custom theme
While the built-in themes provide some level of customization, the
Theme type is provided to help you define your own custom themes with lower-level access to the underlying theme variables.
You can extend a built-in theme without having to re-define the entire theme. This is useful when you only want to override specific theme tokens.
To do that, install
lodash.merge (or equivalent):
Import it, along with the theme you want to extend (eg:
darkTheme) and the TypeScript
Then, merge the built-in theme, with the theme tokens you'd like to override. In this example, I'm overriding the
accentColor token to match my brand's accent color.
Finally, you can now pass your custom theme to
If your app is server/statically rendered and allows users to manually toggle between themes, RainbowKit's theming system can be hooked up to custom CSS selectors with the following functions that can be used with any CSS-in-JS system:
These functions return CSS that sets all required theme variables. Since both strings and objects are supported, this can be integrated with any CSS-in-JS system.
As a basic example, you can render your own
style element with custom selectors for each theme. Since we're taking control of rendering the theme's CSS, we're passing
null to the
theme prop so that RainbowKitProvider doesn't render any styles for us. Also note the use of the extends option on the cssStringFromTheme function which omits any theme variables that are the same as the base theme.