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.box',
  theme: { 
    mode: 'dark', // 'light' | 'dark' | 'system' //
    accent: '#7c3aed', // 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., "#7c3aed")

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