Powered by

A design system from Family

Colors

You can easily customize the accent color used in ConnectKit to more closely match the look and feel of your app.

Accent colors can only be appled when using the default theme. Check out Theming for more information about themes and advanced styling.

Example

To change the accent color, provide a customTheme prop to your <ConnectKitProvider />.

Below is an example that sets the accent color to #00D54B and the accent text color to #FFFFFF:

,
_app.jsx
1const App = () => {
2 return (
3 <WagmiConfig client={client}>
4 <ConnectKitProvider
5 customTheme={{
6 "--ck-accent-color": "#00D54B",
7 "--ck-accent-text-color": "#ffffff",
8 }}
9 >
10 {/* Your App */}
11 <ConnectKitButton />
12 </ConnectKitProvider>
13 </WagmiConfig>
14 );
15};

That's it—the custom theme now extends the default theme to support your custom accent color.

Here it is in action:

On this page