# Custom theme

> Customize the theme of your Wallet APIs app

> For the complete documentation index, see [llms.txt](/docs/llms.txt).

UI components are fully customizable so you can match your app's branding.

What you can customize in the pre-built authentication component:

* Overall theme: colors, radius, illustrations, custom css
* Header: text, logo, custom component
* External wallet connectors: featured wallets, specify order, chain filtering (EVM/Solana), WalletConnect, and more via `configForExternalWallets()`. See [EOA connectors](/docs/wallets/react/login-methods/eoa-login) for more details.

<Tip>
  **Need to set up Tailwind first?** See the [complete Tailwind setup
  guide](/docs/wallets/react/tailwind-setup) for installation and configuration
  instructions.
</Tip>

<Tip>
  See the [UI components guide](/docs/wallets/react/ui-components) for details on configuring your UI components.
</Tip>

# Theme

Theme customizations and styling are passed through `withAccountKitUi`, the Wallet APIs Tailwind plugin, in your `tailwind.config.js` file.

## Colors

The [Wallet APIs Theme](https://github.com/alchemyplatform/aa-sdk/blob/main/account-kit/react/src/tailwind/types.ts) object passed to `withAccountKitUi` supports an overridable `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 focused
* `static` - the color of the border when the input is not focused
* `critical` - 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 button
* `btn-secondary` - the color of the secondary button
* `btn-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 text
* `fg-secondary` - the color of the secondary text
* `fg-tertiary` - the color of the tertiary text
* `fg-invert` - the color of the inverted text
* `fg-disabled` - the color of the disabled text
* `fg-accent-brand` - your brand color
* `fg-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 color
* `bg-surface-subtle` - a subtle background color
* `bg-surface-inset` - the background color of inset components
* `bg-surface-critical` - the background color of critical components
* `bg-surface-error` - the background color of error components
* `bg-surface-success` - the background color of success components
* `bg-surface-warning` - the background color of warning components

### Example

```ts twoslash
import { withAccountKitUi, createColorSet } from "@account-kit/react/tailwind";

export const tailwindConfig = withAccountKitUi(
  {
    content: [],
    // your tailwind config
  },
  {
    colors: {
      active: createColorSet("#94A3B8", "#94A3B8"),
    },
  },
);
```

### Customizing Multiple Colors

You can customize multiple color properties at once for comprehensive theming:

```ts tailwind.config.ts
import { withAccountKitUi, createColorSet } from "@account-kit/react/tailwind";

export default withAccountKitUi(
  {
    content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  },
  {
    colors: {
      "btn-primary": createColorSet("#3b82f6", "#1d4ed8"),
      "fg-accent-brand": createColorSet("#3b82f6", "#60a5fa"),
      active: createColorSet("#94a3b8", "#94a3b8"),
    },
  },
);
```

### Available Color Variables

The following color customizations are available:

**Border Colors:**

* `active` - Border color when input is focused
* `static` - Border color when input is not focused
* `critical` - Border color for error states

**Button Colors:**

* `btn-primary` - Primary button background
* `btn-secondary` - Secondary button background
* `btn-auth` - Authentication button background

**Text Colors:**

* `fg-primary` - Primary text color
* `fg-secondary` - Secondary text color
* `fg-tertiary` - Tertiary text color
* `fg-invert` - Inverted text color
* `fg-disabled` - Disabled text color
* `fg-accent-brand` - Brand accent color
* `fg-critical` - Critical/error text color

**Background Colors:**

* `bg-surface-default` - Default background
* `bg-surface-subtle` - Subtle background
* `bg-surface-inset` - Inset component background
* `bg-surface-critical` - Critical component background
* `bg-surface-error` - Error component background
* `bg-surface-success` - Success component background
* `bg-surface-warning` - Warning component background

## Borders

Similar to colors, the Account Theme object passed to `withAccountKitUi` supports an overridable `borderRadius` field to customize the border radius size. The default value is `sm` which is an `8px` border radius.

```ts twoslash
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](https://github.com/alchemyplatform/aa-sdk/blob/main/account-kit/react/src/types.ts) to `illustrationStyle` in your `uiConfig` when you call `createConfig`.

```ts twoslash
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",
  },
);
```

# Branding the header

To customize the header, you can override either of the `header` or `hideSignInText` options of the `auth` config when calling `createConfig`.

## Changing the header text

The auth modal, by default, shows a `Sign in` text header.

In this example, the default header text is hidden and replaced with a custom one.

```tsx twoslash
// @jsx: react-jsx
import { createConfig } from "@account-kit/react";
import { sepolia, alchemy } from "@account-kit/infra";

export const config = createConfig(
  {
    transport: alchemy({ apiKey: "YOUR_API_KEY" }),
    chain: sepolia,
  },
  {
    auth: {
      header: "Sign in with your account", // [!code ++]
      hideSignInText: true, // [!code ++]
    },
  },
);
```

## Adding an icon

In this example, the `Sign in` text remains in the modal with an icon added above it.

```tsx twoslash
// @jsx: react-jsx
import { createConfig } from "@account-kit/react";
import { sepolia, alchemy } from "@account-kit/infra";

export const config = createConfig(
  {
    transport: alchemy({ apiKey: "YOUR_API_KEY" }),
    chain: sepolia,
  },
  {
    auth: {
      header: <img src="img.src" />, // [!code ++]
    },
  },
);
```