Custom theme
When using React components in your app, you can customize both 1) overall theme and 2) authentication components.
Most theme customizations are passed through using withAccountKitUi
, the Account Kit Tailwind plugin, in your tailwind.config.js
file.
Colors
The Account Kit Theme object passed to withAccountKitUi
supports an overiddable colors
object which accepts a set of color values. Each color is a key-value pair where the key is the name of the color and the value is an object containing the light
and dark
mode value to use.
Border colors
active
- the color of the border when the input is focusedstatic
- the color of the border when the input is not focusedcritical
- the color of the border when the input is in an error state
Button colors
These colors affect the background of buttons
btn-primary
- the color of the primary buttonbtn-secondary
- the color of the secondary buttonbtn-auth
- the color of the authentication button
Foreground colors
These colors primarily affect the text color of the components
fg-primary
- the color of the primary textfg-secondary
- the color of the secondary textfg-tertiary
- the color of the tertiary textfg-invert
- the color of the inverted textfg-disabled
- the color of the disabled textfg-accent-brand
- your brand colorfg-critical
- the color of the critical text
Surface colors
These colors affect the background of various components (eg. modal, inputs, etc)
bg-surface-default
- the default background colorbg-surface-subtle
- a subtle background colorbg-surface-inset
- the background color of inset componentsbg-surface-critical
- the background color of critical componentsbg-surface-error
- the background color of error componentsbg-surface-success
- the background color of success componentsbg-surface-warning
- the background color of warning components
Example
import { withAccountKitUi, createColorSet } from "@account-kit/react/tailwind";
export const tailwindConfig = withAccountKitUi(
{
content: [],
// your tailwind config
},
{
colors: {
active: createColorSet("#94A3B8", "#94A3B8"),
},
}
);
Borders
Similar to colors, the Account Theme object passed to withAccountKitUi
supports an overiddable borderRadius
field to customize the border radius size. The default value is sm
which is an 8px
border radius.
import { withAccountKitUi } from "@account-kit/react/tailwind";
export const tailwindConfig = withAccountKitUi(
{
content: [],
// your tailwind config
},
{
borderRadius: "md",
}
);
The available options are:
none
(0px)xs
(4px)sm
(8px)md
(16px)lg
(24px)
Illustration styles
Unlike colors and border radius, illustration styles are not passed through the Tailwind plugin.
Customize the illustration style of various icons used in the components by passing one of the enum values to illustrationStyle
in your uiConfig
when you call createConfig
.
import { createConfig } from "@account-kit/react";
import { sepolia, alchemy } from "@account-kit/infra";
const config = createConfig(
{
transport: alchemy({ apiKey: "YOUR_KEY" }),
chain: sepolia,
},
{
// ... other ui config options
illustrationStyle: "outline",
}
);
Custom authentication component
The auth modal, by default, shows a Sign in
text header. This header is fully cusomizable, allowing you to change the text or add an icon.
Customize header text
To customize the header text, you can override the header
or hideSignInText
options of the auth
config when calling createConfig
.
In this example, we hide the default header text and replace it with our own.
import { createConfig } from "@account-kit/react";
import { sepolia, alchemy } from "@account-kit/infra";
export const confg = createConfig(
{
transport: alchemy({ apiKey: "YOUR_KEY" }),
chain: sepolia,
},
{
auth: {
header: "Sign in with your account",
hideSignInText: true,
},
}
);
Adding an icon
In this example, we leave the Sign in
text in the modal and add an icon above it.
import { createConfig } from "@account-kit/react";
import { sepolia, alchemy } from "@account-kit/infra";
export const confg = createConfig(
{
transport: alchemy({ apiKey: "YOUR_KEY" }),
chain: sepolia,
},
{
auth: {
header: <img src="img.src" />,
},
}
);