> **Can't find what you're looking for?** Use `search_docs` on the docs MCP server at `https://accounts.tempo.xyz/api/mcp` to find what you need.

# Theming

Theming lets you tune Tempo Wallet's embedded account prompts without changing your signing adapter or account flow.

Use it when your app already uses Tempo Wallet and you want the prompt to match your product's accent color, corner radius, and light or dark mode. These options apply to hosted Tempo Wallet surfaces opened by the `dialog` or `tempoWallet` adapter. App-owned buttons, forms, and custom adapter screens still use your own design system.

## Walkthrough

:::steps
### Connect an Account

Follow the [Connect Accounts](/docs/guides/connect-accounts) guide to set up Wagmi with the Tempo Wallet adapter and let the user sign in. Theming is configured on the same connector, so you do not need to change your app components.

### Choose Theme Values

Pick the values that should travel with the hosted prompt.

| Option   | Values                                                                                   | Purpose                                                                                |
| -------- | ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| `accent` | `'neutral'`, `'blue'`, `'red'`, `'amber'`, `'green'`, `'purple'`, or any CSS color value | Colors primary actions and emphasis states.                                            |
| `radius` | `'none'`, `'small'`, `'medium'`, `'large'`, or `'full'`                                  | Controls the corner radius used inside the prompt.                                     |
| `scheme` | `'light'` or `'dark'`                                                                    | Sets the prompt's color scheme. Omit it to follow the user's operating system setting. |

### Configure Tempo Wallet

Pass `theme` to `tempoWallet`. The SDK sends these values to the embedded iframe or popup whenever Tempo Wallet opens.

```tsx twoslash [src/config.ts]
// @noErrors
import { createConfig, http } from 'wagmi'
import { tempo } from 'wagmi/chains'
import { tempoWallet } from 'wagmi/connectors'

export const config = createConfig({
  chains: [tempo],
  connectors: [
    tempoWallet({
      theme: { // [!code focus]
        accent: '#ff007a', // [!code focus]
        radius: 'full', // [!code focus]
      }, // [!code focus]
    }),
  ],
  multiInjectedProviderDiscovery: false,
  transports: {
    [tempo.id]: http(),
  },
})
```

### Use the Same Sign In Flow

Your sign-in button stays the same. When `connect` opens Tempo Wallet, the prompt uses the theme from your connector configuration.

```tsx twoslash [src/Connect.tsx]
// @noErrors
import { useConnect, useConnectors } from 'wagmi'

export function Connect() {
  const connect = useConnect()
  const [connector] = useConnectors()

  return (
    <button
      disabled={connect.isPending}
      onClick={() => connect.connect({ connector })}
    >
      {connect.isPending ? 'Check prompt...' : 'Sign in'}
    </button>
  )
}
```
:::

## Next Steps

[Connect Accounts](/docs/guides/connect-accounts): Wire up the Tempo Wallet adapter and let users sign in from your app.

[Tempo Wallet Adapter](/docs/adapters/tempo-wallet): Use Tempo Wallet as the hosted adapter for account creation and signing.