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 applied 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

<ConnectKitProvider
  customTheme={{
    "--ck-accent-color": "#00D54B",
    "--ck-accent-text-color": "#ffffff",
  }}
>
  {/* Your App */}
</ConnectKitProvider>

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

Here it is in action:

Colors

Example

On this page