Theming

Set the color mode, accent, and dialog backdrop when creating your client:

import { OneAuthClient } from '@rhinestone/1auth'
 
const client = new OneAuthClient({
  providerUrl: 'https://passkey.1auth.app',
  clientId: 'my-app',
  theme: {
    mode: 'dark',
    accent: '#4F41EF',
    backdrop: {
      color: '#52525c',
      opacity: 0.5,
      blur: 12,
    },
  },
})

Theme options

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. Default: `#000000`
`backdrop.opacity`	`number`	Opacity from `0` to `1`. Default: `0.4`
`backdrop.blur`	`number`	Blur radius from `0` to `40` pixels. Default: `8`

On dark pages, use a lighter backdrop tint to distinguish the dialog from the background. Each backdrop field defaults independently; the same settings apply while the dialog loads.

Update theme at runtime

client.setTheme({ mode: 'dark', accent: '#ec4899' })

Per-method theming

Individual methods such as signMessage() also accept a theme option for request-specific overrides.