Theming

Customize the look and feel of AgentFish components.

Theme Configuration

Pass theme options to the provider:

<AgentFishProvider
  config={{
    app: { appId: '...' },
    theme: {
      mode: 'dark',           // 'light' | 'dark'
      colors: {
        primary: '#0EA5E9',
        primaryHover: '#0284C7',
        background: '#0f0f1a',
        surface: '#1a1a2e',
        border: '#2d2d44',
        text: '#ffffff',
        textMuted: '#9ca3af',
      },
      radius: '12px',
      fontFamily: 'Inter, sans-serif',
    },
  }}
>

Theme Options

Option	Type	Default	Description
mode	'light' | 'dark'	'dark'	Color mode
colors.primary	string	#0EA5E9	Primary brand color
colors.primaryHover	string	#0284C7	Primary hover state
colors.background	string	#0f0f1a	Page background
colors.surface	string	#1a1a2e	Card/modal background
colors.border	string	#2d2d44	Border color
colors.text	string	#ffffff	Primary text
colors.textMuted	string	#9ca3af	Secondary text
radius	string	12px	Border radius
fontFamily	string	Inter, sans-serif	Font family

CSS Variables

For more control, override CSS variables directly:

@import '@agentfish/react/styles.css';

:root {
  --af-primary: #0EA5E9;
  --af-primary-hover: #0284C7;
  --af-background: #0f0f1a;
  --af-surface: #1a1a2e;
  --af-border: #2d2d44;
  --af-text: #ffffff;
  --af-text-muted: #9ca3af;
  --af-radius: 12px;
}

Available Variables

Variable	Description
--af-primary	Primary brand color
--af-primary-hover	Primary hover state
--af-background	Page background
--af-surface	Card/modal background
--af-border	Border color
--af-text	Primary text color
--af-text-muted	Secondary/muted text
--af-radius	Border radius
--af-font-family	Font family

Light Mode

<AgentFishProvider
  config={{
    app: { appId: '...' },
    theme: {
      mode: 'light',
      colors: {
        primary: '#0EA5E9',
        background: '#ffffff',
        surface: '#f8fafc',
        border: '#e2e8f0',
        text: '#0f172a',
        textMuted: '#64748b',
      },
    },
  }}
>

Custom Styling

Components accept className for additional styling:

<SignIn 
  className="my-custom-button"
  providers={['email', 'wallet']}
/>

.my-custom-button {
  /* Your custom styles */
}

Example: Brand Colors

Match your brand colors:

// Purple theme
<AgentFishProvider
  config={{
    app: { appId: '...' },
    theme: {
      mode: 'dark',
      colors: {
        primary: '#8B5CF6',
        primaryHover: '#7C3AED',
      },
    },
  }}
>

// Green theme
<AgentFishProvider
  config={{
    app: { appId: '...' },
    theme: {
      mode: 'dark',
      colors: {
        primary: '#10B981',
        primaryHover: '#059669',
      },
    },
  }}
>