Are you an LLM? Read llms.txt for a summary of the docs, or llms-full.txt for the full context.
Theming – 1auth
Skip to content

Theming

Customize the appearance of 1auth dialogs to match your brand. Set color mode and accent colors when initializing the client or update them at runtime.

ThemeConfig

Pass a theme option when creating your client:

import { OneAuthClient } from '@rhinestone/1auth'
 
const client = new OneAuthClient({
  providerUrl: 'https://passkey.1auth.app',
  theme: { 
    mode: 'dark', // 'light' | 'dark' | 'system' //
    accent: '#4F41EF', // Hex color for buttons and interactive elements 
  }, 
})

Theme options

PropertyTypeDescription
mode'light' | 'dark' | 'system'Color mode. "system" follows the user's OS preference
accentstringHex color for buttons and interactive elements (e.g., "#4F41EF")
backdropobjectTint and blur of the full-viewport scrim behind the dialog. See Backdrop

Backdrop

The dialog floats over a full-viewport scrim that tints and blurs your page behind it. By default the scrim is a near-black wash (rgba(0,0,0,0.4)). On a dark app this can make it hard to tell where your page ends and the dialog begins — set a lighter color (e.g. a mid-gray) so the dialog reads as a distinct surface lifted off the background.

const client = new OneAuthClient({
  providerUrl: 'https://passkey.1auth.app',
  theme: {
    mode: 'dark',
    backdrop: { 
      color: '#52525c',  // 6-digit hex tint, default "#000000" //
      opacity: 0.5,      // 0–1, default 0.4 
      blur: 12,          // gaussian blur in px (0–40), default 8 
    }, 
  },
})
PropertyTypeDescription
colorstringScrim tint as a 6-digit hex (e.g. "#52525c"). Defaults to "#000000"
opacitynumberScrim opacity, 0–1. Defaults to 0.4
blurnumberGaussian blur radius of your page behind the dialog, in pixels (0–40). Defaults to 8

Every field is optional and falls back to its default independently, so passing only color keeps the default opacity and blur. The backdrop config also applies to the loading screen shown while the dialog initializes, so the transition is seamless.

Update theme at runtime

Change the theme dynamically using setTheme():

// Switch to dark mode
client.setTheme({ mode: 'dark' })
 
// Change accent color
client.setTheme({ accent: '#ec4899' })
 
// Update both
client.setTheme({
  mode: 'light',
  accent: '#3b82f6',
})

Per-method theming

You can also pass theme options to individual methods:

const result = await client.signMessage({
  username: 'alice',
  message: 'Hello World',
  theme: {
    mode: 'dark',
    accent: '#10b981',
  },
})

Planned features

  • Typography - Custom fonts and text styles
  • Border radius - Rounded corners configuration
  • CSS variables - Full control via CSS custom properties

Next steps