> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rhinestone.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming

> Customize embedded wallet dialogs with a color mode, accent, and backdrop.

Theme the dialogs opened by your shared [embedded wallet client](/wallets/embedded-wallets/accounts#initialize-the-client).

## Configure the initial theme

Add a `theme` field to the canonical client initializer:

```ts theme={null}
theme: {
  mode: "dark",
  accent: "#4F41EF",
  backdrop: {
    color: "#52525c",
    opacity: 0.5,
    blur: 12,
  },
},
```

| Property | Type | Description |
| - | - | - |
| `mode` | `"light" \| "dark" \| "system"` | Color mode. `system` follows the user's OS preference. |
| `accent` | `string` | Hex color for buttons and interactive elements. |
| `backdrop.color` | `string` | Six-digit hex tint. Defaults to `#000000`. |
| `backdrop.opacity` | `number` | Opacity from `0` to `1`. Defaults to `0.4`. |
| `backdrop.blur` | `number` | Blur radius from `0` to `40` pixels. Defaults to `8`. |

Each backdrop property defaults independently. On dark pages, a lighter tint can make the dialog boundary clearer.

## Update the theme at runtime

```ts theme={null}
import { wallet } from "./wallet";

wallet.setTheme({
  mode: "dark",
  accent: "#EC4899",
});
```

Use this when your application changes color mode after the client has been created.

## Override one request

Methods such as `signMessage()` accept a request-specific `theme` override:

```ts theme={null}
await wallet.signMessage({
  accountAddress,
  message,
  theme: {
    mode: "light",
    accent: "#2563EB",
  },
});
```

A request override applies only to that dialog. Keep the client theme as the application-wide default.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.