Rainbow logo
RainbowKit
2.1.4

Theming

Theming

Using and customizing the themes

You can tweak the RainbowKit UI to match your branding. You can pick from a few pre-defined accent colors and border radius configurations.

There are 3 built-in theme functions:

  • lightTheme   (default)
  • darkTheme
  • midnightTheme

A theme function returns a theme object. You can pass the object to the RainbowKitProvider's theme prop.

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
export const App = () => (
<RainbowKitProvider theme={darkTheme()} {...etc}>
{/* Your App */}
</RainbowKitProvider>
);

If you want, you can pass in accentColor, accentColorForeground, borderRadius, fontStack and overlayBlur to customize them.

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
export const App = () => (
<RainbowKitProvider theme={darkTheme({ accentColor: '#7b3fe4', accentColorForeground: 'white', borderRadius: 'small', fontStack: 'system', overlayBlur: 'small', })} {...etc} >
{/* Your App */}
</RainbowKitProvider>
);

The built-in theme functions also accept an options object, allowing you to select from several different visual styles.

PropTypeDefault
accentColorstring "#0E76FD"
accentColorForegroundstring "white"
borderRadiusenum large
fontStackenum rounded
overlayBlurenum none

For example, to customize the dark theme with a purple accent color and a medium border radius scale:

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider theme={darkTheme({ accentColor: '#7b3fe4', accentColorForeground: 'white', borderRadius: 'medium', })} {...etc} >
{/* Your App */}
</RainbowKitProvider>
);
};

Each theme also provides several accent color presets (blue, green, orange, pink, purple, red) that can be spread into the options object. For example, to use the pink accent color preset:

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider theme={darkTheme({ ...darkTheme.accentColors.pink, })} {...etc} >
{/* Your App */}
</RainbowKitProvider>
);
};

Here are a few different ways you can use the theme prop.

Use the darkTheme theme.

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
export const App = () => (
<RainbowKitProvider theme={darkTheme()} {...etc}>
{/* Your App */}
</RainbowKitProvider>
);

Use the midnightTheme theme.

import { RainbowKitProvider, midnightTheme, } from '@rainbow-me/rainbowkit';
export const App = () => (
<RainbowKitProvider theme={midnightTheme()} {...etc}>
{/* Your App */}
</RainbowKitProvider>
);

Here are a few different ways you can use the accentColor config.

Set the accent color to a custom purple value.

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider theme={darkTheme({ accentColor: '#7b3fe4', accentColorForeground: 'white', })} {...etc} >
{/* Your App */}
</RainbowKitProvider>
);
};

Set the accent color to the built-in green preset.

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider theme={darkTheme({ ...darkTheme.accentColors.green, })} {...etc} >
{/* Your App */}
</RainbowKitProvider>
);
};

Here are a few different ways you can use the borderRadius config.

Set the border radius to medium.

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider theme={darkTheme({ borderRadius: 'medium', })} {...etc} >
{/* Your App */}
</RainbowKitProvider>
);
};

Set the border radius to none.

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider theme={darkTheme({ borderRadius: 'none', })} {...etc} >
{/* Your App */}
</RainbowKitProvider>
);
};

Reminder: the available border radius valies are: large (default), medium, small and none.

By default, the fontStack is set to rounded. But here's how you can use the fontStack config.

Set the font stack to system.

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider theme={darkTheme({ fontStack: 'system', })} {...etc} >
{/* Your App */}
</RainbowKitProvider>
);
};

By default, the overlayBlur is set to none. But here's how you can use the overlayBlur config.

Set the overlay blur to small.

import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider theme={darkTheme({ overlayBlur: 'small', })} {...etc} >
{/* Your App */}
</RainbowKitProvider>
);
};

Here are a few different ways you can use different themes, with accentColor, borderRadius and fontStack props together.

  • Use the lightTheme theme
  • Set the accent color to a custom purple value
  • Set the border radius to medium
  • Set the font stack to system
import { RainbowKitProvider, lightTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider theme={lightTheme({ accentColor: '#7b3fe4', accentColorForeground: 'white', borderRadius: 'medium', fontStack: 'system', })} {...etc} >
{/* Your App */}
</RainbowKitProvider>
);
};
  • Use the midnightTheme theme
  • Set the accent color to the built-in pink preset.
  • Set the border radius to small
  • Set the font stack to system
import { RainbowKitProvider, midnightTheme, } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider theme={midnightTheme({ ...midnightTheme.accentColors.pink, borderRadius: 'small', fontStack: 'system', })} {...etc} >
{/* Your App */}
</RainbowKitProvider>
);
};

If your app uses the standard prefers-color-scheme: dark media query to swap between light and dark modes, you can optionally provide a dynamic theme object containing lightMode and darkMode values.

import { RainbowKitProvider, lightTheme, darkTheme, } from '@rainbow-me/rainbowkit';
const App = () => (
<RainbowKitProvider theme={{ lightMode: lightTheme(), darkMode: darkTheme(), }} {...etc} >
{/* Your App */}
</RainbowKitProvider>
);