Theming

Theme the dialogs opened by your shared embedded wallet client.

Configure the initial theme

Add a theme field to the canonical client initializer:

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.

import { oneAuth } from "./oneauth"

oneAuth.setTheme({
  mode: "dark",
  accent: "#EC4899",
})

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

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

await oneAuth.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.