Auth Theme & Branding

Customise the visual appearance of all auth pages through authConfig.theme, authConfig.logo, and authConfig.card.

Background

authConfig={{
  theme: {
    background: {
      color: '#f5f5f5',
      // or a gradient:
      gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      // or an image:
      image: '/img/login-bg.jpg',
    },
    primaryColor: '#5048ED',   // buttons, active states
    fontFamily: 'Inter, sans-serif',
    borderRadius: '8px',
    textColor: '#101828',
    linkColor: '#5048ED',
  },
}}

Logo

authConfig={{
  logo: {
    url: '/img/logo.svg',
    width: '140px',
    height: 'auto',
  },
}}

Card Style

authConfig={{
  card: {
    backgroundColor: '#ffffff',
    borderRadius: '16px',
    boxShadow: '0 20px 60px rgba(0,0,0,0.12)',
    maxWidth: '440px',
    padding: '40px',
  },
}}

Complete Branded Example

const App = () => (
  <ZangoApp
    appInitializerEndpoint="/appbuilder/initializer/"
    customPages={customPages}
    authConfig={{
      theme: {
        background: {
          gradient: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)',
        },
        primaryColor: '#e94560',
        borderRadius: '12px',
      },
      logo: {
        url: '/img/logo-white.svg',
        width: '160px',
      },
      card: {
        borderRadius: '20px',
        boxShadow: '0 25px 80px rgba(0,0,0,0.3)',
        padding: '48px',
      },
      login: {
        title: 'Welcome to MyApp',
        subtitle: 'Sign in to continue',
      },
    }}
  />
);